Why my load more button won’t work whatever I do?

I’ve been struggling with this the whole day, I just can’t get it working for I don’t know which reason. The doubt is because I have another section on the same page and it works perfectly.

I have a form, and when that form gets submitted I show results below without refresh with the help of AJAX. Now at the bottom I have a Load More button which should calculate all outputted results and limit them to 3. So when the Load More button is clicked it will show 3 more results and so on.

My PHP + HTML:

<?php 
$comments = mysqli_query($conn, "SELECT * FROM comments WHERE feed_id='$feed_token' ORDER by posted_at DESC");
?> 
<div class="storelisting<?php echo $post_inc2; ?>" id="storelisting<?php echo $post_inc2; ?>">
<?php
while($comments_row = mysqli_fetch_array($comments)) {             
  $comment = $comments_row['comment'];
  $comments_posted_at = $comments_row['posted_at'];
  $user_token = $comments_row['user_id'];

  $user_firstname = mysqli_query($conn, "SELECT firstname FROM users WHERE token='$user_token'");
  $user_username = mysqli_query($conn, "SELECT username FROM users WHERE token='$user_token'");
  $user_logo = mysqli_query($conn, "SELECT logo FROM users WHERE token='$user_token'");
  $comment_firstname = mysqli_fetch_row($user_firstname);
  $comment_username = mysqli_fetch_row($user_username);
  $comment_logo = mysqli_fetch_row($user_logo);
?>

<div class="comments">
  <div class="main">
    <figure class="user mb-0 mr-3"><img class="post-img-img comment-img" src="assets/img/user_images/<?php if ($comment_logo[0] == '') { echo 'user-top.png'; }  else { echo $comment_logo[0]; } ?>"></figure>
    <div>
      <h5 class="modal-title comments-modal-title" id="exampleModalLongTitle"><?php echo $comment_firstname[0]; ?><span class="bullet"> &sdot; </span><span class="comments-subtitles">@<?php echo $comment_username[0]; ?></span><span class="bullet"> &sdot; </span><span class="comments-subtitles"><?php echo timeago($comments_posted_at); ?></span></h5>
      <div class="modalUsername get-space">Replaying to <span class="reply-to">@<?php echo $username[0]; ?></span></div>
      <p class="commentMsg"><?php echo $comment; ?></p>
    </div>
  </div>
</div>

<?php } ?>

</div>

<div id="loadMoreComments<?php echo $post_inc2; ?>">Load More</div>

jQuery (Updated):

   $('.storelisting<?php echo $increase; ?> .comments').css('display','none');
$(document).ready(function () {
    size_li = $(".storelisting<?php echo $increase; ?> .comments").length;
    x=3;
    $('.storelisting<?php echo $increase; ?> .comments:lt('+x+')').show();
    if (size_li <= x) {
    $('#loadMoreComments<?php echo $increase; ?>').remove();
    }
    $('#loadMoreComments<?php echo $increase; ?>').click(function () {
        x= (x+3 <= size_li) ? x+3 : size_li;

        setTimeout(function(){
        $('.storelisting<?php echo $increase; ?> .comments:lt('+x+')').fadeIn("slow");
      }, 1000);

        if(x == size_li){
        setTimeout(function(){
          $('#loadMoreComments<?php echo $increase; ?>').hide();
        }, 1000);
        }
    });
});

So the PHP code gets all the rows from the selected column/table, that works great, with the AJAX I show submitted comments bellow, which works great too. But the Load more button doesn’t do nothing when its clicked. The script shows only three divs and hide others, but when clicked it doesn’t respond. The $post_inc2 and the $increase variables increases the number on the divs (because I have multiple feeds that lets you comment on it).

Any help will mean a lot, since I’m really frustrated.

Answer

A few pointers:

Oftentimes .show() won’t do anything unless you do .hide() first, and vise versa. You can chain them, e.g. $(el).hide().show() … it’s probably this.
Otherwise make sure your selectors are working by assigning your $('selector') calls to a variable and then doing a console.log(thatVar.length) to make sure each of them got the number of results you expected.
Finally it’s possible you are attempting to attach your click listener before the element is ready in DOM. Best practice is always to attach listeners either inline or (in your case) during a DOM ready event:

$(document).ready(function() {
  // all your JQuery code shown above
});

Advertisement

Answer