Show More Comments – Ajax, Jquery, Php, Mysql

I saw a post in jquery group discussion: http://groups.google.com/group/jquery-en/browse_thread/thread/b59304e8544c0293?hl=en, now i am free, so dicided to try something.

This script is just an idea of showing more comments, with no css, with this idea we can update this further as we want.

Clcik Here For Demo

Click Here For Source
This Contains: index.php, config.php, show_more.php, jquery.js and show_more.js

index.php






<title>Post - More Comments</title>

body, td { margin: 0; padding: 4; font-family:Verdana; font-size:10px; }
#loading { position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
#more { text-transform: uppercase; color: #c2c2c2; cursor: pointer; }
div { padding: 2px; }



<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="table1">
<tr>
<td>
			
<div></div>
</td>
</tr>
<tr>
<td>
			<span id="more">Show More</span>
<div id="loading" style="position:absolute;">LOADING...</div></td>
</tr>
</table>
<form>
		&lt;input type=&quot;hidden&quot; name=&quot;show_more&quot; id=&quot;show_more&quot; value=&quot;" /&gt;
		&lt;input type=&quot;hidden&quot; name=&quot;table_name&quot; id=&quot;table_name&quot; value=&quot;" /&gt;
		&lt;input type=&quot;hidden&quot; name=&quot;post_id&quot; id=&quot;post_id&quot; value=&quot;" /&gt;
		&lt;input type=&quot;hidden&quot; name=&quot;now_showing&quot; id=&quot;now_showing&quot; value=&quot;" /&gt;
		&lt;input type=&quot;hidden&quot; name=&quot;sort_field&quot; id=&quot;sort_field&quot; value=&quot;" /&gt;
	</form>
	&lt;input type=&quot;hidden&quot; name=&quot;total_cmts&quot; id=&quot;total_cmts&quot; value=&quot;" /&gt;</div>





show_more.php




<title>Result</title>


<div id="content">

<div></div>
</div>


show_more.js

//Variables
var loading = $("#loading");
var comments = $("#comments");
var more = $("#more");
var target_page, query, now_showing, total_cmts;

//show loading bar
function showLoading(){
	loading.slideDown("slow");
}
//hide loading bar
function hideLoading(){
	loading.slideUp("slow");
};

//update now showing after every click of show more
function update_now()
{
	now_showing = parseInt($("#now_showing").attr("value")) + parseInt($("#show_more").attr("value"));
	$("#now_showing").attr("value", now_showing );

	//hide show more when total comments are shown
	total_cmts = parseInt($("#total_cmts").attr("value"));
	if(now_showing >= total_cmts)
		more.slideUp("slow");
}

//When show more clicked
more.click(function(){
	showLoading();

	//define target page and query string
	target_page = "show_more.php";
	query = $("#myForm").serialize();

	//send request and append the response data in comments area
	$.get(target_page, query , function(data){
		comments.append(data);
		hideLoading();
		update_now();
	});
});

//intially hide loading bar
hideLoading();
Advertisements
This entry was posted in Ajax, Jquery, PHP, Tutorial and tagged , . Bookmark the permalink.

18 Responses to Show More Comments – Ajax, Jquery, Php, Mysql

  1. sivakumar says:

    its good
    but suggestion
    please give the structure of table to download
    it take time to find the table structure

  2. birkof says:

    awesome script man, definitely i will use it in the next project

  3. Brando says:

    Hey man-

    This code rocks. I am super pumped to use it. However, one issue. I am loading the comments page in an ajax tab. So therefore I am running into issue having it work when it loads into the div. It works great on its own. Any ideas?
    Thanks
    Brando

    • beski says:

      Thanks Brando.

      I have been facing the same problem like this. Ajax calls inside the ajax loaded content… never tired to solve this yet. Any project in future may make me to try.
      🙂

      • Brando says:

        Thanks again.
        Don’t mean to push, but might we be able to work on this feature in an ajax loaded div together? Put some hours in trying to make it work, but nervous to modify to much JavaScript coding. If you got a little time would you mind helping me with this…or at least leading me in the right direction? Thanks again, I truely love the program !!!!
        Brando

  4. deep says:

    Hello,

    This is really nice plug in. I just wanted to ask you one question here that can we limit the the no of records we are showing here? if i have 100 records in the database i want to show only 25 with this show more. Do you think we can do that something like this.

  5. ajiprabowo says:

    awesome, this is what I need. Thanks

  6. Pingback: Web Programming: Show More Comments – Ajax, Jquery, Php, Mysql « Let's share and win the challenge of life

  7. briancaicco says:

    testing

  8. gogozec says:

    You could make wordpress plugin for this. I didn’t found nothing similar to this so far.

  9. gogozec says:

    One suggestion. You should put instead of , because there are multiple contents. Good work, bro! 🙂

  10. Padam says:

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\wamp\www\show_more\show_more.php on line 20

  11. Qaysar says:

    Hello,

    The demo and download links are dead, can you please fix.

    Thanks

  12. The specialist accounts and products that are offered by international banking recommend offshore accounts to many businesses thst
    are hoping to expand their operations or are searching forr stable ways to
    manage their money out-with their home country. This
    $800 lent out will then become a deposit in another bank.
    o Thrikft institutions-these are such institutions such as loan associations,
    credit unions and savings banks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s