使用jQuery PHP和MySQL进行页面滚动(无限滚动)时的数据加载

时间:2015-05-21 08:03:03

标签: php jquery

我有无限滚动并且在此之上我有(类别列表)所以当其中一个按钮点击无限滚动更新和ajax加载的新信息时,数据加载后无限滚动停止工作

$(document).ready(function() {
    // Infinite Ajax Scroll configuration
    jQuery.ias({
        container : '#events', // main container where data goes to append
        item: '.items', // single items
        pagination: '.event-nav', // page navigation
        next: '.event-nav a', // next page selector
        loader: '', // loading gif
        triggerPageThreshold: 5 // show load more if scroll more than this
    });
});
//Set up click filterBy event
$(document).on('click', '.filterBy' ,function (event) {
    $( ".filterBy" ).removeClass('active');
    $(this).addClass('active');
    var url = '/rest/ajax/filter.json';
    var divId = "event-category";
    //Process button click event
    loadAjax(this.id,url,divId);
});


//Set up click filterType event
$(document).on('click', '.filterType' ,function (event) {
    $( ".filterType" ).removeClass('active');
    $(this).addClass('active');
    var url = '/rest/ajax/filterType.json';
    var divId = "events";
    //Process button click event
    loadAjax(this.id,url,divId);

});



// JavaScript Document
function loadAjax(val,urlReq,divId)
{
    $.ajax({
        type: 'POST', // type of request either Get or Post
        url: urlReq,// Url of the page where to post data and receive response
        data: 'data='+val, // data to be post
        beforeSend: function( xhr )
        {
            $( "#"+divId ).show();
            $('html,body').animate({

                scrollTop: $("#"+divId).offset().top
            }, 1500);
            $("#"+divId).html('loading.........');
        },
        success: function(data)
        {
            $("#"+divId).html(data);
        } //function to be called on successful reply from server
    });


}

0 个答案:

没有答案