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

Question

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 !

Is 'load more' button is cell of table in which are you appending data. I guess you are doing wrong there. — Kamahire, Jun 12 '13 at 05:45
please dont use mysql_* function those are deprecated see this http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php/14110189#14110189 and your code is vulnerable to sql injection you need to escape all request properly — NullPoiиteя, Jun 12 '13 at 05:48
in addition the removing the '#more'+ID on success add the button back. — Orangepill, Jun 12 '13 at 05:52
thank you all for your help. This script works fine if i change the table to an ordered list. (tr = ol and td = li) and bam ! it works like a charm. That's why i really think the issue comes from the append part of the code. Any ideas? — Caro_deb, Jun 12 '13 at 21:38

score 2 · Answer 1 · answered Jun 12 '13 at 06:02

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;
    });
    });

Thanks for your help but it doesnt work. The new posts don't get loaded and the button load more doesn't appear... — Caro_deb, Jun 12 '13 at 21:31

score 1 · Answer 2 · answered Jun 12 '13 at 05:51

1

You are removing the load more button after button clicked

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

answered Jun 12 '13 at 05:51

Yogesh Suthar

30,424
18
72
100

he's replacing it with a loading gif before this. so if he does this instead of the more button he will get the image – Orangepill Jun 12 '13 at 05:53
@Orangepill True but he is removing the div as soon as the content is loading. – Yogesh Suthar Jun 12 '13 at 05:55
1

I'm just saying he needs to put the more link back so the user can click on it a second time. And it would be nice to remove or hide the loader gif. – Orangepill Jun 12 '13 at 06:04
@Orangepill Thanks for you input. When i remove this line, the button does appear once the results are loaded but, the gif image inside the button keeps on "loading" forever. And the button is not clickable either. And if i remove the line containing the gif image, then the button is just empty. Any clue how to fix that ? – Caro_deb Jun 13 '13 at 15:20
I would suggest placing both the image (with a display:none style) and the button in the #more+ID div and just use show and hide as needed. – Orangepill Jun 13 '13 at 15:26

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

2 Answers2