Synchronous JQuery.post()

Question

I'm writing a little script that makes individual AJAX calls through a loop and I came across a, most likely obvious, problem. It seems that the loop is going to fast to handle the data that is received with ajax, causing it to only load the last piece of data in the loop. I added an alert box that steps through the iterations and that loads the data fine, but it wouldn't be practical in a user environment. The code is simply a jquery .post() with a callback inside a for-loop. I can post code upon request, but I feel like this can be cleared up verbally. Any one know a workaround or better approach to loading data sequentially?

EDIT

Does .ajaxSetup() modify .post()? Perhaps I can use that to change the async value for .post()..

Izak

ajax by definition is asynchronous ;) – Diplomacy

Maybe you can try to turn async: false in your ajax call options. Doing this will put each ajax request in a queue until and they are executed sequentially. – Histrionic

In the .post() if you add a success function with delay, sounds better than alert. – Leekgreen

Is there a possibility to make just one ajax call and post all the data you are posting in each loop as an array of objects. Another thing I would suggest is to move the code handling the data received with ajax into a function and call it from the ajax success callback. – Eladiaelaeoptene

@Akhil There most likely is, but I always seem to stick towards doing my web projects logical to the mind but illogical to web development standards :(. The data is received through a success callback already. – Izak

.post() is just shorthand for .ajax({ type: 'POST', url: url, data: data, success: success dataType: dataType }) – Abeyant

Answer 1

I actually found that adding this snippet worked so I didn't have to change my .post() to .ajax()

$.ajaxSetup({ async: false });

I'm not sure if it will also change the settings of my other ajax calls though

Izak

just put that 'snippet' in the ajax call that is in your for loop, that way it doesn't alter the way your other ajax calls are executed. I'll post an answer showing what I mean... – Histrionic

There's no reason you shouldn't be able to send asynchronous requests in a loop. I suspect you have some sort of context issue so that all of the success functions are updating the same element or something. If you post your code it would probably give a better idea. Sending synchronous requests in a loop is going to hang the browser until all requests complete. – Weathercock

@kingjiv That is exactly correct. The success function fills a table. – Izak

Answer 2

You need to force your ajax call to be synchronous my friend ;)

http://api.jquery.com/jQuery.ajax/

ex:

asyncBoolean Default: true

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Diplomacy

Answer 3

If you use async: false you should be able to put each of your ajax calls into a queue until they get to be executed in a synchronous method. Like so:

 for( var i=0;i < x;i++ ){
     $.ajax({url: 'myurl',
             async: false,
             success: function(data){
                        //do something with the returned 'data'
                      };
    });
 }

Histrionic

Answer 4

function myFunction() {
    var x;
for(var i=0;i<10;i++){
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
    document.getElementById("demo").innerHTML = x;
}
}

    enter code here

Tsan