How to work with JSONP to call back the function?

Question

I am trying to communicate with a server using JSONP call back.

Here is my code

$('.icwsDownloadRecording').click(function(){
    var id = $(this).attr('data-recordingid');

    $.ajax({    
        type: 'GET',
        url: 'http://example.com/Default2.aspx',        
        data: {'ID': id},
        dataType: 'jsonp',
        cache: false,
        timeout: 40000,
        crossDomain:true,
        jsonp: "MyCallbackFunction",
    }); 

});


function MyCallbackFunction(data)
{
  //process data further
  console.log(data);

    if(!data || data.url.length < 5){
        return;
    }

    var $preparingFileModal = $("#preparing-file-modal");

    $preparingFileModal.dialog({ modal: true });

    $.fileDownload( data.url, {
        successCallback: function (url) {

            $preparingFileModal.dialog('close');
        },
        failCallback: function (responseHtml, url) {

            $preparingFileModal.dialog('close');
            $("#error-modal").dialog({ modal: true });
        }
    });

    return false; //this is critical to stop the click event which will trigger a normal file download!

}

The issue here is that I keep getting this message in the console

ReferenceError: MyCallbackFunction is not defined

I do have this defined as you can see in my code above

The server respond looks like this

MyCallbackFunction("{'URL': 'http:\/\/example.com:8106\/ghjgj3835396265336634646562363030303122226D616C686179656B22535353557DBE0C305645E2DE110AA1D7F8792E96A3'}");

how can I correct this issue?

EDITED

This is my code after Quentin Answer , this is my new code

$(function(){

    $('.icwsDownloadRecording').click(function(){
        var id = $(this).attr('data-recordingid');

        $.ajax({    
            type: 'GET',
            url: 'http://example.com/Default2.aspx',        
            data: {'ID': id},
            dataType: 'jsonp',
            timeout: 40000,
            success: function(data){

                 //process data further
                console.log(data);

                if(!data || data.url.length < 5){
                    return;
                }

                var $preparingFileModal = $("#preparing-file-modal");

                $preparingFileModal.dialog({ modal: true });

                $.fileDownload( data.url, {
                    successCallback: function (url) {

                        $preparingFileModal.dialog('close');
                    },
                    failCallback: function (responseHtml, url) {

                        $preparingFileModal.dialog('close');
                        $("#error-modal").dialog({ modal: true });
                    }
                });

                return false; //this is critical to stop the click event which will trigger a normal file download!
            }
        }); 

    });
});

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Unless you have all of that code wrapped in another function, that should work.

Using a hardcoded function name is bad practise though.

Update:

$(function(){

You do have all that code wrapped in another function.

Remove this:

jsonp: "MyCallbackFunction",

Replace it with:

success: MyCallbackFunction

Or you could put an anonymous function expression there instead (as you have done in your edit)

Let jQuery generate a unique function name (which protects you from race conditions) and allow the server to use the callback query string argument to determine what function name to use.

MyCallbackFunction is in the same scope as the ajax call, so it will be available to the function (which can copy it to a suitably named global).

After you fix that, you have an additional problem:

MyCallbackFunction("{'URL':

Your response is JSON encoded in a JavaScript string, but you are trying to treat it as a JavaScript object.

Either:

Fix the server so it doesn't stringify the JSON or
Run the first argument through JSON.parse

crossDomain:true,

Remove that. It doesn't do anything here. (All it does is, when using XHR (which you aren't using) to the same origin (which you aren't targeting), suppress the custom headers that aren't typically allowed on a cross-origin request so that you can perform an HTTP redirect to a different origin).

cache: false,

That's the default for JSONP requests. Including it is pointless.

return false; //this is critical to stop the click event which will trigger a normal file download!

If you want to stop the click event, then you need to return false from the click event handler function (not the Ajax success handler).

You can't wait until the Ajax function has run and got a response before doing that. Ajax is asynchronous.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 02 '15 at 17:29

Quentin

914,110
126
1,211
1,335

Thank you for that. I changed the code I am not sure if I did the success: MyCallbackFunction correctly or not but I updated my answer with the new code based on your feedback – Jaylen Jul 02 '15 at 17:36
Thank you for your edit. I moved the `return false;` line under the $ajax line so it will return false right away. but my code is still not working as I still get the same error in the console. – Jaylen Jul 02 '15 at 17:44
Is your web service hardcoded to use a fixed JSONP name instead of looking at the callback argument in the query string? – Quentin Jul 02 '15 at 17:45
I am not sure what you mean by that. – Jaylen Jul 02 '15 at 17:46
Look at Default2.aspx. Does it read the callback query string value or does it have the string "MyCallbackFunction" hardcoded? – Quentin Jul 02 '15 at 17:47
the string MyCallbackFunction is hard coded in the code so it will always return the sale thing. – Jaylen Jul 02 '15 at 17:48
I'd fix that then. It isn't how JSONP normally works, and it can lead to caching issues. – Quentin Jul 02 '15 at 17:50
okay. I removed that from my default page.I no longer get an error but I also do not see anything in the console. console.log(data); is not displaying anything. – Jaylen Jul 02 '15 at 17:54
What does "I removed that from my default page" mean? Are you saying you remove the hardcoded function name without replacing it with the one specified in the callback query string parameter? – Quentin Jul 02 '15 at 17:55
yes. am I suppose to put something there? so My Default2.aspx output starts with `('{....` – Jaylen Jul 02 '15 at 17:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82224/discussion-between-mike-and-quentin). – Jaylen Jul 02 '15 at 17:58
You are supposed to read the value of the `callback` argument from the query string and put that there. – Quentin Jul 02 '15 at 19:10

How to work with JSONP to call back the function?

1 Answers1