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, Jul 08 '16 at 06:09

Jayanti Lal · Accepted Answer · 2016-07-08T06:20:41.710

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 08 '16 at 06:20

answered Jul 08 '16 at 05:26

Jayanti Lal

1,175
6
18

I have added new comments please try that..hope that will solve your issue – Jayanti Lal Jul 08 '16 at 06:21
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? – Katty Jul 08 '16 at 10:28
Your ajax have any dependancy? – Jayanti Lal Jul 11 '16 at 03:21
Can you create a fiddle for this..i am not able get your problem completely – Jayanti Lal Jul 11 '16 at 10:51
async: false is okay but async: true is not giving response in sequence http://jsfiddle.net/anilk1797/y7yhd/49/ I want same result but using async: true. – Katty Jul 12 '16 at 08:20
See since you are using ajax in loop...async false will wait till response come then will go for next iteration of loop..while async true wont wait and loop will keep executing thats y you are getting result in such a way....now please tell me what is your expected results...i will create a new fiddle for you :) – Jayanti Lal Jul 12 '16 at 09:44
I want same result like async: false but using async: true because async:false block the other events while request is not completed – Katty Jul 12 '16 at 11:24
Thank you! this is the same what i need http://stackoverflow.com/a/19332078/2756584 – Katty Jul 14 '16 at 06:24

score 0 · Answer 2 · answered Jul 08 '16 at 05:45

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 08 '16 at 05:45

Harsha Vardhan

49
1
7

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? – Katty Jul 08 '16 at 06:16

Ajax call blocking other javascript code

2 Answers2