Jquery tabs with load more button

Question

hi is there any reference/sample for php ajax tabs with load more functionality within each tabs? Lets say we have 2 tabs and when we click each tab it will display only selected number of result until we click load more button at end of each result. Thanks. My current code seems not works well,when i click each tabs it display result correctly but when i click the tabs again it loads more data.Below are my current code:

<li data-tab-id="self" class="tab selected"><a href="#">Near You</a><span class="unread-count hidden" style="display: none;"></span></li>


<li data-section-id="user_feed" data-component-bound="true">
    <ul class="module-list">                            
    <!-- USER ACTIVITY JSON -->
    </ul>
    <a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="getRecentActivityClick(event)">
    <span data-component-bound="true" class="loading-msg user_feed">See more recent activity</span>
    </a>
</li>

<script type="text/javascript">
var totalRecords = '<?= $this->totalRecords?>';
$(document).ready(function(){
getRecentActivity(totalRecords);
});

$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
        getRecentActivity(totalRecords);

    }
});

function getRecentActivityClick(event)
{
    if (event != null){
            disabledEventPreventDefault(event);
        }
        getRecentActivity(totalRecords);
}

home.js:

function getRecentActivity(totalRecords)
{
$.ajax({
        url:baseUrl + "activity/activityfeed",
        data:{'total':totalRecordsView},
        dataType:"json",
        type:"POST",
        success:function(data){

 var activityHtml = '<p>Hello</p>';
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);


}
});

}

UPDATE: JSFIDDLE: http://jsfiddle.net/zlippr/5YkWw/1/

Answer 1

with what i understood from your question.. i think you are getting more datas since u are using.. append() .. use html()

append() inserts content, specified by the parameter, to the end of each element in the set of matched elements.

html() is used to set an element's content, any content that was in that element is completely replaced by the new content.

try this

replace

$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);

with

$('#activity-feed li[data-section-id=near_you] .module-list').html(activityHtml); //html()

Answer 2

You can do this:

 $('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
 // here you are appending the fulldata just apply some css here

use css this way:

$('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'300px','overflow':'hidden'})
    .append(activityHtml);

then click the loadmore:

$('your load more button').toggle(function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'auto','overflow':'auto'})
    },function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'300px','overflow':'hidden'});
});