este es el codigo:
Código Javascript:
Ver original
$(function() {//When the dom is ready $('.load_more').live("click",function() { //When user clicks var last_msg_id = $(this).attr("id");//Get the id from the hyperlink if(last_msg_id!='end'){ //if not all post has been loaded yet $.ajax({//fetch the article via ajax type:] "POST", url: "facebook_style_ajax_more.php",//calling this page data: "lastmsg="+ last_msg_id, beforeSend: function() { // add the loadng image $('a.load_more').append('<img src="facebook_style_loader.gif" />'); }, success: function(html){ $(".facebook_style").remove();//remove the div with class name "facebook_style" $("ol#updates").append(html);//output the server response into ol#updates } }); } return false; }); });
en el body:
Código PHP:
<div id='container'>
<ol id="updates">
<?php
$query ="select * from twitter ORDER BY msg_id ASC LIMIT 9";
$result = mysqli_query($dbc,$query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li> <?php echo $message; ?> </li>
<?php } ?>
</ol>
<div id="facebook_style">
<a id="<?php echo $msg_id; ?>" href="#" >Show Older Posts <img src="arrow1.png" /> </a>
</div>
</div>
Código PHP:
<?php
include('database_connection.php');
if(isset($_POST['lastmsg']) &&is_numeric($_POST['lastmsg']))//some validation to prevent sql injection
{
$lastmsg=$_POST['lastmsg']; //getting the row id of last msg displayed
$query="select * from twitter where msg_id>'$lastmsg' order by msg_id asc limit 9";
$result = mysqli_query($dbc,$query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li> <?php echo $message; ?> </li>
<?php
}
?>
<?php
if( mysqli_num_rows($result)==9){ //this if else statement "decides" whether end of page has reached or there's more data to load .
?>
<div id="facebook_style"> <a id="<?php echo $message; ?>" href="#" >Show Older Posts <img src="arrow1.png" /></a> </div>
<?php
}else {
echo ' <div id="facebook_style">
<a id="end" href="#" >No More Posts</a>
</div>';
}
}