You guys must be wondering how to do that, you click on more, it loads and the updates appear, without the page getting refreshed. So here we are, today we will tell you a damn easy way to accomplish this on your website (a small, 15 minutes tutorial).
So as the page doesn't gets refreshed, that simply means we will be using AJAX to make this happen and a bit of javascript , along with our favorite 'Php'.
Download the Script
(We are currently working on showing you Demos, but our scripts are absolutely working, through snapshots you get an idea what its about, the next you have to do is download it, set the database, as described, save data in it from sql file enclosed in zip file of script, and you are done. You make your own demo. Run it using your localhost.)
Below is a summary of the script, what we have done and how you can very easily accomplish it on your platform.
Database Design
Messages table :
CREATE TABLE messages(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(200));
Adding Data to Database
You can yourself add data to the database, we advice you to add 4 rows with msg_ids as (1,2,3,4) and respective messages. Or, you can simply copy & paste the query from mysql_data.sql enclosed along with the script into your Mysql Query Browser.db.php
In db.php you must change the SERVER_NAME, USERNAME, PASSWORD and DATABASE to your own MySql settings.
<?php
define('DB_SERVER', 'SERVER_NAME');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
?>
Index.php in this particular case is just a simple php/html page which includes show_updates.php which loads messages from the Database.
show_updates.php
This in particular loads the messages in descending order of msg_id with the LIMIT constraint included. For this tutorial we have put it as '2' . That is, only 2 messages will be displayed initially and when we click on "More" the next 2 will be added. You can simply change this LIMIT to the number, how many messages you wish to display.
<?php
//checking whether its the first call or call for more
if(isset($lastid))
{
$lastid=$lastid;
$loadmore="WHERE msg_id<'$lastid'";
}
else
{
$lastid=0;
$loadmore='';
}
// counting the total number of messages
$message_total = mysql_query("SELECT * from messages");
$message_count= mysql_num_rows($message_total);
//fetching messages from database with LIMIT as 2
$message_query = mysql_query("SELECT * from messages $loadmore ORDER by msg_id desc LIMIT 2");
while($data = mysql_fetch_row($message_query))
{
echo "<div class='message_box'>";
echo "<div class='user_image'><img src='http://www.gravatar.com/avatar/HASH?s=40'></div>";
echo "<div class='message_body'>$data[1]</div>";
echo "</div>";
$msg_id = "$data[0]";
}
if($message_count>2)
{
if($msg_id==1)//when we reach first message posted, no more message to load
{
echo "<div class='morebox'>No more updates to load...";
echo "</div>";
}
else
{
//displaying the Morebox
echo "<div id='more$msg_id' class='morebox'>";
echo "<a href='#' class='more' id='$msg_id'>More</a>";
echo "</div>";
}
}
?>
Now, when the user clicks on the More button at the bottom, $(".more").live("click",function() is initiated, this collects the value from attribute "id" and POST it to moreupdates.php where it is stored into $lastid and show_updates.php is again included, this time $lastid is defined, hence the Mysql_query to load messages from data base has a constraint WHERE msg_id<$lastid there by appending the next set of messages below the earlier ones.
load_more.js
A very simple javascript to do what i just explained above.
$('.more').live("click",function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "moreupdates.php",
data: "last_msg_id="+ ID,
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="ajax-loader.gif" />'); },
success: function(html){
$("#more"+ID).remove();
$("div#content").append(html);
}
});
return false;
});
moreupdates.php
Here the value of $last_msg_id is stored into $lastid, and then show_updates.php is again included to show further more messages.
<?php
include ('db.php');
if(isSet($_POST['last_msg_id']))
{
$lastid=mysql_real_escape_string($_POST['last_msg_id']);
include('show_updates.php');
}
?>
And we are done now, its the most easiest way to accomplish this. In this tutorial we only send the last msg_id by using "More" button via attribute "id" , if for any reason you have to send any other value too, then you can use attribute "rel", for that you simply add the rel attribute in the anchor tag of Morebox and the below code to the javascript.
var rel = $(this).attr("rel");
Still if you have any trouble, let me know through your precious messages. I love hearing from you.
