CODEWITHSUNDEEP
phpjqueryajaxcodeigniter
Krishna38
Krishna38

Reputation: 735

Load Ajax data while page scrolls down using PHP

To load the data when page scrolls down using function like this

$(window).scroll(function(){
        if ($(window).scrollTop() == $(document).height() - $(window).height())
        {
            //alert('Scrolling Down');
            get_summary_details(); //Here it calls AJax Function load the data

        }
    });

get_summary_details() function works fine when page scrolls down.This function is like this

function get_summary_details()
    {

        var dataString=[];
        $('div.company_summary_data').each(function() {
            var id = $(this).attr('id');
            dataString.push(id);
        });                     
        $.ajax({
            url:"getajaxcompanysummarydetails",
            type:"POST",
            //dataType: "json",
            data:"last_app_data_id="+JSON.stringify(dataString),
            success:function(data)
            {                               
                $('.company_summary_data:last').after(data);

            }

        });         
    }

My problem is

How to prevent that Second Request Processing without completion of first Request.Is this Possible? Because of this i am getting duplicate records of data.I need to prevent to display duplicate records.

Thanks!

Upvotes: 5

Views: 1834

Answers (2)

MidhunKrishna
MidhunKrishna

Reputation: 621

Your AJAX requests are most likely queueing up behind one another, because they are asynchronous, even though JavaScript itself is mostly single threaded.

You can use the abort() method to make sure only one request runs at a time. You need to assign the jqXHR object returned by $.ajax() to a variable:

please refer this link

Upvotes: 2

Martin
Martin

Reputation: 2427

You need to check whether the ajax request is busy by setting a boolean flag

var loadingSummaryDetails = false;

Set it to true when you start the Ajax and to false when the call finishes

function get_summary_details()
{
    if(loadingSummaryDetails) {
        return;
    }
    loadingSummaryDetails = true;

    var dataString=[];
    $('div.company_summary_data').each(function() {
        var id = $(this).attr('id');
        dataString.push(id);
    });                     
    $.ajax({
        url:"getajaxcompanysummarydetails",
        type:"POST",
        //dataType: "json",
        data:"last_app_data_id="+JSON.stringify(dataString),
        success:function(data)
        {     
            $('.company_summary_data:last').after(data);

        }

    }).always(function()
        {     
            loadingSummaryDetails = false;
        });         
}

Upvotes: 1

Related Questions