1

こんにちは私は、ユーザーが[さらに読み込む]ボタンをクリックするとDBからのデータが表示されるアプリを持っていますが、問題は、すべてのデータがフェッチされた後もボタンが表示され、ユーザーがもう一度ボタンをクリックすると同じデータが繰り返されることです。これはコードですが、問題がどこにあるのかわかりません。

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>

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

    });

}

ありがとう ！！

4

1 に答える 1

0

子要素の数に対するチェックで 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>

意味的には、もう少し理にかなっており、おそらくマークアップの量も削減されるでしょう。

于 2012-10-22T03:20:30.067 に答える