PHP Ajax錯誤加載更多

Question

您好，我有一個應用程序，如果用戶單擊“加載更多”按鈕，它將顯示數據庫中的數據，但是問題是，一旦獲取了所有數據，該按鈕仍然會顯示，並且如果用戶再次單擊該按鈕，則會重復相同的數據。 這是代碼，但我不確定問題出在哪里。

從json提取數據並加載到，單擊按鈕觸發json提取數據事件

<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>

Java腳本

$(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');
            }
    }

    });

}

謝謝 ！！

Answer 1

嘗試對子元素的數量進行檢查來包裝getRecentActivity函數：

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

    //existing getRecentActivity() code here

}

這應該起作用，因為您的AJAX調用將追加到.module-list ul元素，並且在調用成功完成一次之后，它不應再為空。

此處有更詳細的說明： 如何計算孩子的數量？

---

另外，一些建議：

1）在jQuery中，可以通過在$（document）.ready（）塊內設置事件處理程序來避免使用內聯“ onclick”屬性，如下所示：

$(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）考慮使用<button>元素代替當前使用的<a> ：

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

從語義上講，這可能更有意義，並且可能還會減少標記的數量。