How to make multiple JSONP calls after one submit

Question

I need to make a widget where one can enter some text, and my server api.example.com can act on, and respond back. The thing is, I need to make multiple calls to my server, before the client gets the final "completed report". I currently have the following code.

$('#widget-form').submit(function() {
       var jqxhr = $.ajax({
            url: "/startanalyzerp?string=someexampletext",
            crossDomain: true,
            dataType: 'json'
        })
        .success(function(report) {
            alert("success"+report.id);
        })
        .error(function() {
            alert("error");
        })
        .complete(function() {
            alert("complete");
        });

What /startanalyzerp does is returns a unique id (integer), which I need to pass to subsequent urls. I have the value of this integer with report.id.

What I want to be able to do is call the other functions crossdomain.

/step2?id=report.id
/step3?id=report.id
/step4?id=report.id

I've been able to do it on the same domain using:

$.each(endpoint_array, function(index,value) {
    $.getJSON(value,function(report) {
});

Where endpoint_array is a simple array in order of what endpoint I want to be called.

I'd love any help on this, I'm sure it's something simple I'm missing.

score 1 · Answer 1 · answered Mar 08 '11 at 03:16

Two options I can see:

1 - only perform one call from Ajax and perform the rest server side using HttpRequest/cURL style commands then send back the "Completed Report" as the response to the initial ajax request.

2 - Nest the ajax requests:

$('#widget-form').submit(function() {
       var jqxhr = $.ajax({
            url: "/startanalyzerp?string=someexampletext",
            crossDomain: true,
            dataType: 'json'
        })
        .success(function(report) {
            alert("success"+report.id);

               var jqxhr = $.ajax({
               url: "/startanalyzerp/step2?string=someexampletext",
               crossDomain: true,
               dataType: 'json'
           })
           .success(function(report) {
               alert("success"+report.id);
               //Call step 3 and so on
           })
           .error(function() {
               alert("error step 2");
            })
            .complete(function() {
                alert("complete step 2");
            });
        })
        .error(function() {
            alert("error");
        })
        .complete(function() {
            alert("complete");
        });

If I was to use #1, how would I update the client with what I'm checking for? Could it just be a random timer thing? If so, then how would I update the progress bar while I wait for the one request to finish completely? — Vid Luther, Mar 08 '11 at 15:19
Also, if I was to use #2, it'd end up being some very hairy and nested thing right? There's no simple way to write it inside a $.each loop? — Vid Luther, Mar 08 '11 at 15:20
The point of Ajax is that it's asynchronous (you can make it synchronous I believe, but I also believe that it is not recommended as I would imagine it could lock up your browser while it processes) - chaining your requests via the callback function is a standard way of ensuring that code is executed after the ajax request has finished (that's the point of the Success callback. As for you first comment - you would return the necessary data as the response from the 1 and only Ajax request (most likely as JSON), the logic for generating this data would be executed in the server-side script. — Rob, Mar 08 '11 at 21:31

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Having the same issue and Robs server side suggestion is nice :)

Now jquery.when was introduced where one can wait for defered objects. Read on and this.

edited May 23 '17 at 11:56

Community

1
1

answered Nov 06 '12 at 19:34

Karussell

17,085
16
97
197

How to make multiple JSONP calls after one submit

2 Answers2