1

I want to call jsonpcallback function in while or for loop. But I am getting asynchronous results. How to achieve that in jsonpcallback. Kindly anyone help me out to fix this or provide any other solution.

window.onPublitoryOebPart = function(json) {
    window.publitoryOebPartJson = json;
    content = patchEditedContent(json);
    saveOebPartToc(content);
}
i = 0;
while(i < $("#oeb_parts_count").val()) {
    return unless $("#oeb-part-file-url-"+i).length > 0
    fileUrl = $("#oeb-part-file-url-"+i).html();
    $.ajax({
        url: fileUrl,
        crossDomain: true,
        dataType: "script",
        jsonpCallback: "onPublitoryOebPart"
    })
    i++;
}
user2864740
  • 60,010
  • 15
  • 145
  • 220
user2138489
  • 77
  • 3
  • 10

1 Answers1

0

JavaScript can't get a "synchronous" JSONP result. This is because JSONP involves creating a new script element; such a dynamically created script element can only load the resource asynchronously.

Just use the success callback for the JSONP request and handle the response asynchronously. Manually specifying the jsonpCallback is only required/useful if the service doesn't allow a dynamic function to be specified.

If using success callback in a loop, it's also important to read up on closures (and then read more).

For instance:

var i = 0; // Don't forget the "var"
while(i < $("#oeb_parts_count").val()) {
    var elm = $("#oeb-part-file-url-"+i);
    if (!elm.length) { return; } // Make sure to use valid syntax
    var fileUrl = elm.html();
    $.ajax({
        url: fileUrl,
        crossDomain: true,
        dataType: "script",
        success: function (i, fileUrl) {
            // Return a closure, the i and fileUrl parameters above
            // are different variables than the i in the loop outside.
            return function (data) {
                // Do callback stuff in here, you can use i, fileUrl, and data
                // (See the links for why this works)
                alert("i: " + i + " data: " + data);
            };
        })(i, fileUrl) // invocation "binds" the closure
    });
    i++;
}

It may be cleaner simply to create a closure via a named function, but it's all the same concept.


Synchronous XHR requests are also highly discouraged; XHR is not JSONP, even though such requests are also created with the jQuery.ajax function.

Community
  • 1
  • 1
user2864740
  • 60,010
  • 15
  • 145
  • 220
  • Then How to achieve this? Is that possible to pass i value in jsonpcallback function? – user2138489 Mar 04 '14 at 06:33
  • @user2138489 Simply use the `success` callback (jQuery will synthesize a proxy function) and handle the result *asynchronously*. You may also need to read up on closures, but the end result is the same - JSONP *must* be used asynchronously. – user2864740 Mar 04 '14 at 06:34
  • Yes I tried with success, but it didnt workout. But am not sure whether my try was correct. I just give alert json in success function but got undefined – user2138489 Mar 04 '14 at 06:37
  • @user2138489 Start with using `success` - then fix it and/or find out why it "doesn't work". See http://stackoverflow.com/a/7212065/2864740 – user2864740 Mar 04 '14 at 06:38
  • I removed jsonpcallback and calling a function from success is working. But how to pass extra params to a function? because "json" variable is a default param for that function which I not pass anything while calling it. Now I want to pass i variable to that function. – user2138489 Mar 04 '14 at 06:56
  • @user2138489 I've updated with a trivial example of a closure; see the links for more informaiton. – user2864740 Mar 04 '14 at 07:01
  • Its a coffee script. I am converting it into JavaScript here. No need of defining variable in coffeescript – user2138489 Mar 04 '14 at 07:20
  • @user2138489 Then that is the most non-CoffeeScript "CoffeeScript" I have ever seen. Unless you're going to learn about and *use* CoffeeScript (which is fine), just use JavaScript - this poor hybrid has so much unlove. At the very least, *appropriately tag* questions. – user2864740 Mar 04 '14 at 07:22