PHP ajax bug load more

Question

hi i have an app where if user click load more button it will show data from DB, but the issue is that once all data has been fetched, the button still show up and if user click the button again, same data are repeated. This is the code but i am not sure where the problem is.

Data fetch from json and load into , the button click trigger json fetch data event

<ul class="module-list">                            

</ul>
<a class="btn-btn blue-blue more-wishlists" href="#" onclick="javascript:getRecentActivity(event)">
<span data-component-bound="true" class="loading-msg">See more recent activity</span>
</a>

Javascript

$(document).ready(function(){
getRecentActivity(null);
});

function getRecentActivity(event)
{
     if (event != null){
            disabledEventPreventDefault(event);
        }
    $.ajax({
        url:"<?=$this->baseUrl('activity/activityfeed')?>",
        data:{'total':totalRecordsView},
        dataType:"json",
        type:"POST",
        success:function(data){
            totalRecordsView = data['total_view'];

            data = data['result'];

            var activityHtml =  ''

            for(var i=0; i<data.length; i++){   
            activityHtml += '<li class="clearfix media-block review-block module-li" >'+
                '<div class="user-info-activity">'+
                    '<div class="photo-box pb-60s">'+
                        '<a href="#">';

            if(data[i]['img_url']){
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['img_url'][0]['u_img']+'" width="60">';
                } else {
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['review'][0]['u_img']+'" width="60">';
                }

            activityHtml +='</a></div></div>'+
                '<div class="media-story">'+
                    '<div class="feed-content">'+
                        '<div class="item-title clearfix">'+
                            '<div class="title-text">';

            if(data[i]['img_url']){
            activityHtml += '<a class="user-name"'+
                'href="user/'+data[i]['img_url'][0]['user_unique_name']+'" data-hovercard-id="">'+
                    ''+data[i]['img_url'][0]['name']+'</a> '+
                        ' added 1 photo for <a class="user-name" href="business/'+data[i]['img_url'][0]['business_name_url']+'">'+data[i]['img_url'][0]['business_name']+'</a></div>'+
                                '<div class="timestamp fine-print"><abbr class="timeago" '+
                    'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div>'+
                    '</div></div>'+ 
                        '<div class="item-description">'+                           
                            '<ul class="photo-list large clearfix"><li>'+
                                '<div class="photo-info-box">'+
                    '<img src="../public/assest/business/biz_'+data[i]['img_url'][0]['photo_url']+'" alt="Photo of Community Lending Network" width="120" height="120">'+
                        '</div></li></ul>';

                } else {
                    if(data[i]['review'][0]['u_img_rating'] == 50){
                        var title = '5.0 star rating';
                    } else {
                        title = 'x star rating';
                        }
                            activityHtml += '<a class="user-name"'+
                                'href="user/'+data[i]['review'][0]['user_unique_name']+'" data-hovercard'+
                                    '-id="EObvJWZ_R5SFg7L1ePTpKA">'+data[i]['review'][0]['name']+'</a> '+
                                        ' reviewed '+
                    '<a class="biz-name" href="business/'+data[i]['review'][0]['business_name_url']+'" data-hovercard-id="t61v_1fZbpPa4cyST4Dy8g">'+
                            data[i]['review'][0]['business_name']+
                                '</a></div>'+

            '<div class="timestamp fine-print"><abbr class="timeago" '+
                'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div></div></div>'+

                '<div class="item-description">'+
                    '<div class="rating">'+
                            '<i class="star-img stars_4" title="'+title+'">'+
                                '<img alt="'+title+'" class="" height="15"'+
                    'src="../public/images/star/stars_'+data[i]['review'][0]['u_img_rating']+'.gif"'+
                    'width="75"></i></div>'+

                '<p class="review-expandable" data-component-bound="true">'+
                '<span>'+data[i]['review'][0]['review_desc']+'</span></p>' +

'<div class="rateReview clearfix" id="'+data[i]['review_id']+'" data-component-bound="true">'+
                '<p class="review-intro review-message saving-msg" data-component-bound="true">Was this review ...?</p>'+
                '<ul data-component-bound="true" class="voteset'+data[i]['review_id']+'">'+
                    '<li class="useful ufc-btn" id="1">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"useful") rel="useful"><span>Useful</span></a>';

        if(data[i]['vote'][0]['useful'] == null){
            activityHtml +='<span></span>';
                } else {
                    activityHtml +='<span>('+data[i]['vote'][0]['useful']+')</span>';
                }

                    activityHtml +='</li>'+
                    '<li class="funny ufc-btn" id="2">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"funny") rel="funny"><span>Funny</span></a>';

        if(data[i]['vote'][0]['funny'] == null){
            activityHtml +='<span></span>';
                } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['funny']+')</span>';
                    }

                    activityHtml +='</li>'+
                    '<li class="lame ufc-btn" id="3">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"lame") rel="lame"><span>Lame</span></a>';
                        if(data[i]['vote'][0]['lame'] == null){
                        activityHtml +='<span></span>';
                    } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['lame']+')</span>';
                    }

                    activityHtml +='</li>'+
                '<span class="vote'+data[i]['review_id']+'"></span></ul>'+
                    '</div></div></div></div></li>';


                                        }

            }

            $('.module-list').append(activityHtml);

            if(totalRecords <= totalRecordsView){

                $('.btn-btn').text('Nothing beyond here ...');
                $('.btn-btn').removeAttr('onclick href');
            }
    }

    });

}

Thanks !!

Answer 1

Try wrapping your getRecentActivity function with a check against the number of child elements:

if ($('.module-list').children().length === 0) {

    //existing getRecentActivity() code here

}

This ought to work because your AJAX call is appending to the .module-list ul element, and it should no longer be empty after the call has successfully completed once.

More detailed explanation here: How can I count the number of children?

---

Also, a few suggestions:

1) In jQuery you can avoid using inline "onclick" attributes by setting up an event handler inside the $(document).ready() block, like this:

$(document).ready(function () 

    $('.more-wishlists').click(function (event) {  

        //put the contents of your "getRecentActivity" function here
        //and it will be called when an element with the class
        //"more-wishlists" is clicked

    });

});

2) Consider using a <button> element instead of the <a> you're using right now:

  <button class="btn-btn blue-blue more-wishlists" type="button">
    See more recent activity
  </button>

Semantically, it might make a bit more sense and will probably also cut down on the amount of markup.