Ajax call blocking other javascript code

Question

I am using flex slider on a page and page also making an ajax call for other job. My issue is when user load the page, ajax call block flex slider until ajax request has not been completed. After completed ajax request, flex slider loaded successfully. If i remove ajax script then flex slider is loading very fast.

Flex slider and ajax request both are written between this code...

$(document).ready(function(){
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: true,
        animationLoop: true,
        slideshow: false,
        itemWidth: 100,
        itemMargin: 15,        
        asNavFor: '#slider'        
    });

    // Rest code of slider will come here

    // Ajax code start from here    
    $.ajax({ 
            type: "GET",
            async:false,
            url: prefixUrl, 
            success: function(results) { 
                    $(results).insertBefore('.event_container'); 
            }
        });

});

Please suggest any ideas so that ajax call should not block flex slider.

Thank you

You say "not working" ... what DOES happen, what do you EXPECT instead — Jaromanda X
– Jaromanda X, Commented Jul 8, 2016 at 6:09

Jayanti Lal · Accepted Answer · 2016-07-08 06:20:41Z

3

Async false will wait till your operation get complete.

try this :

$.ajax({ 
        type: "GET",
        async:true,
        url: prefixUrl, 
        success: function(results) { 
                $(results).insertBefore('.event_container'); 
        }
    });

//update 2 :

Actually it is happening since you have added Ajax in ready function so till your ajax is running page ready event is not getting completed. try removing it from document ready.

edited Jul 8, 2016 at 6:20

answered Jul 8, 2016 at 5:26

Jayanti Lal

1,1836 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jayanti Lal Over a year ago

I have added new comments please try that..hope that will solve your issue

Katty Over a year ago

Ya # After using async:true, it's working but ajax is not giving proper response means async:false giving 6 column results but async:true, giving 3 columns result. Can you suggest how to handle this?

Jayanti Lal Over a year ago

Your ajax have any dependancy?

Jayanti Lal Over a year ago

Can you create a fiddle for this..i am not able get your problem completely

Katty Over a year ago

async: false is okay but async: true is not giving response in sequence jsfiddle.net/anilk1797/y7yhd/49 I want same result but using async: true.

|

Harsha Vardhan · Accepted Answer · 2016-07-08 05:45:40Z

0

We use ajax for not getting post-back operation and in your code you mentioned like async: false which leads to synchronous ajax call. Synchronous ajax call makes you to stop/block until you get the response for the previous request. So try this:

$.ajax({ 
    type: "GET",
    url: yourURL, 
    success: function(results) { 
            $(results).insertBefore('.event_container'); 
    },
    async:true
});

answered Jul 8, 2016 at 5:45

Harsha Vardhan

491 gold badge1 silver badge7 bronze badges

1 Comment

Katty Over a year ago

Changing async:true working fast but again flex slider loads after ajax request complete. Is there any other option so that flex slider and ajax call don't depends on each other?

Collectives™ on Stack Overflow

Ajax call blocking other javascript code

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related