0

I have been trying to use jquery to fiddle with cross domain requests but although the request succeeds the browser complains about not being able to parse the results. I understand that JsonP has a callback parameter attached to it but all the questions on SO never clarify how the callbacks are actually called. Could someone clarify how the callbacks from JsonP are executed and help me with this.

<body>
    <ul id="tweets">Test</ul>
</body>

Javascript for this

        window.myCallback = function(data) {
            console.log(data);
            $("#tweets").append("<div>Hello</div>");
        };

        $(document).ready(function(){

            $.ajax({
              url: 'http://www.netflix.com',
              type: 'GET',
              dataType: 'jsonp',
              jsonp: 'callback',
              jsonpCallback: 'myCallback',
                      contentType: 'text/html',
                    success: function (data) {
                        alert(data);
                    }
            });

        });

I also have a JsFiddle here http://jsfiddle.net/3yVC7/

So in this example I just want to modify the "tweets" div when the callback is called but it never gets called. Any help will be really appreciated. Thanks so much.

ssarangi
  • 602
  • 1
  • 10
  • 28

2 Answers2

2

remove the qoutations around the callback function:

    var myCallback = function(data) {
        console.log(data);
        $("body").append("<div>Hello</div>");
    };

    $(document).ready(function(){

        $.ajax({
          url: 'http://www.google.com',
          type: 'GET',
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: myCallback,
          contentType: 'text/html',
          success: function (data) {
            alert(data);
          }
        });

    });

fiddle : click me

but you still have other errors, I'll check them later

Note: you shouldn't use callbacks with jsonp unless you want to use a specific callback value, on the other hand json uses callback values( automatically generated),, if you want to callback a function place it in complete or success callback function of the ajax's

goodniceweb
  • 167
  • 1
  • 10
CME64
  • 1,673
  • 13
  • 24
0

The jsonp datatype supports only json formatted data.

In your case the http://www.netflix.com does not support jsonp output type, it sends back html content as the response, so I don't think it is possible to use jsonp with the given resource

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • actually I have the same problem with another site which does return json. Yet in that case also I couldn't get it to work. The netflix example was just there to show the problem. – ssarangi Jun 14 '13 at 03:05
  • @ssarangi look at your browser console to see whether there was an error, also try removing the `jsonpCallback: 'myCallback',` line and the `contentType` – Arun P Johny Jun 14 '13 at 03:07
  • Also do you have a function called `myCallback` in the global scope – Arun P Johny Jun 14 '13 at 03:08
  • Yes, browser does have an error saying invalid label (when I was trying with an intranet site returning json). I have tried removing the myCallback and it didn't seem to work. – ssarangi Jun 14 '13 at 03:08
  • Can you share the complete error message, also you can get the sent request path from the network tab of browser developer tools copy it and paste it in a new browser tab to see the response – Arun P Johny Jun 14 '13 at 03:10
  • These are the errors I am getting. [20:11:46.691] GET http://scsjenkins01:8080/computer/scjenkinsgfx01/api/json?callback=successCallback&_=1371179503065 [HTTP/1.1 200 OK 201ms] [20:11:46.849] SyntaxError: invalid label @ http://scsjenkins01:8080/computer/scjenkinsgfx01/api/json?callback=successCallback&_=1371179503065:1 – ssarangi Jun 14 '13 at 03:12