CODEWITHSUNDEEP
phpjavascriptjquerymysqlajax
Caro_deb
Caro_deb

Reputation: 279

Issue with AJAX "load more" button: disappears once clicked

EDIT: thanks everyone for your help. It still doesn't work though. This script works fine if i change the table to an ordered list. (tr = ol and td = li) That's why i really think the issue comes from the append part of the code. Any ideas?

Everything seems to work fine except for the "load more" button that disappears after it's been clicked. The new posts load but the users cannot click on the button again to load more posts. I've looked on SO but couldn't find a fix for my issue.

If I remove this line: 

$("#more"+ID).remove();

then the button does show up but the gif image keeps on loading forever and the button is not clickable...

Here's the index.php code:

<table id="update_list" >
<tbody>
<?php
$result=query("SELECT * FROM postlist ORDER BY postid DESC LIMIT 9");
foreach ($result as $row)
{
$postid=$row['postid'];
$post=$row['post'];
?>
<tr id="<?php echo $postid ?>">
<td> 
<?php echo $post; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div id="more<?php echo $postid; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $postid; ?>">more</a>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="/loading.gif" />');

$.ajax({
type: "POST",
url: "loadmore.php",
data: "lastpost="+ ID, 
cache: false,
success: function(html){
$("#update_list >tbody").append(html);
$("#more"+ID).remove();
}
});
}
else
{
$(".morebox").html('The End');
}
return false;
});
});
</script>
</html>

Here is the loadmore php page:

<?php
include("includes/config.php");
if(isset($_POST['lastpost']))
{
$lastpost=$_POST['lastpost'];

$result=query("SELECT * from postlist WHERE postid < '$lastpost' ORDER BY postid DESC 
LIMIT 5"); 


foreach ($result as $row){
$postid=$row['postid'];
$post=$row['post'];
?>
<tr id="<?php echo update$postid ?>">
<td>
<?php echo $post; ?>
</td>
</tr>
<?php } ?>
<div id="more<?php echo $postid; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $postid; ?>">more</a>
</div>   
<?php  }?>

Any tips on what i'm doing wrong here ? Thanks !

Upvotes: 0

Views: 1281

Answers (2)

Dracco
Dracco

Reputation: 443

Try this:


    
    $(function() {
    $('.more').live("click",function() 
    {
    var ID = $(this).attr("id");
    if(ID)
    {
    $("#more"+ID).find("a").hide().insertAfter('<img src="/loading.gif" />'); //hide a link and insert image after it
    $.ajax({
    type: "POST",
    url: "loadmore.php",
    data: "lastpost="+ ID, 
    cache: false,
    success: function(html){
    $("#update_list >tbody").append(html);
    $("#more"+ID).find("img").remove(); // remove img
    $("#more"+ID).find("a").show();  //and show link
    }
    });
    }
    else
    {
    $(".morebox").html('The End');
    }
    return false;
    });
    });

Upvotes: 2

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

You are removing the load more button after button clicked

$("#update_list >tbody").append(html);
//$("#more"+ID).remove(); remove this line

Upvotes: 1

Related Questions