JSON data not responding

Question

Following is my code :

     function jsonpCallback(response){
                    //JSON.stringify(response)
                    alert(response);
                }                
                $.ajax({
                    url: url,
                    dataType: 'jsonp',
                    error: function(xhr, status, error) {
                        alert(error);
                    },
                    success: function(data) {
                        alert(data);
                        jsonpCallback(data);
                    }
                });

Here my url variable is the link which contain the following data and as per I know it is in the JSON format:

[{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}] etc..

I want to call jsonpCallback function after passing successive data to it. But success argument of $.ajax is not calling the function thats why I am not getting any data into it. But my debugger window showing response there, so why its not coming $.ajax function?

Any help...thanks in advance.

why are you using jsonp , it it a cross domain call , and also are there any errors in console ??? — Kanishka Panamaldeniya, May 23 '12 at 12:01
@KanishkaPanamaldeniya : `$.ajax function{ alert(data); }` is not firing so not getting any response. — J.K.A., May 23 '12 at 12:13
yes...console showing the response which I posted in my question — J.K.A., May 23 '12 at 12:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11642/discussion-between-kanishka-panamaldeniya-and-kaj) — Kanishka Panamaldeniya, May 23 '12 at 12:17

score 1 · Accepted Answer · answered May 23 '12 at 12:05

Try to pass type of ajax call GET/POST.

$.ajax({
     type: "GET",
     url: url,
     dataType: 'jsonp',
     error: function(xhr, status, error) { alert(error); },
     success: function(data) {
         alert(data);
         jsonpCallback(data);
     }
});

 function jsonpCallback(response){
      //JSON.stringify(response)
      alert(response);
 }

Andrew Moore · Answer 2 · 2012-05-23T12:37:42.233

The URL you are trying to load data from doesn't support JSONP, which is why the callback isn't being called.

If you own the endpoint, make sure you handle the callback GET parameter. In PHP, your output would look like this:

<?php 
echo $_GET['callback'].'('.json_encode($x).')';

This will transform the result to look like this:

jsonp2891037589102([{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}])

Of course the callback name will change depending on what jQuery generates automatically.

This is required as JSONP works by creating a new <script> tag in the <head> to force the browser to load the data. If the callback GET parameter isn't handled (and the URL returns a JSON response instead of a JSONP response), the data gets loaded yes, but isn't assigned to anything nor transferred (via a callback) to anything. Essentially, the data gets lost.

Without modifying the endpoint, you will not be able to load the data from that URL.

+1 for being the first to show the real problem. Didn't see your answer when I posted mine though :p — Florian Margaine, May 23 '12 at 12:28

score 0 · Answer 3 · edited May 23 '17 at 11:49

First check in which event you are calling $.ajax function...

    <script type='text/javascript'>
    jQuery('#EnrollmentRoleId').change(function(){
alert("ajax is fired");
    $.ajax({
         type: "GET",
         url: url,
         dataType: 'jsonp',
         error: function(xhr, status, error) { alert(error); },
         success: function(data) {
             alert(data);
             jsonpCallback(data);
         }
    });
    });
     function jsonpCallback(response){
          //JSON.stringify(response)
          alert(response);
     }       

    </script>

second try to replace $ with jQuery.

Try to give no conflict if you thinking any conflict error..

jQuery ajax error callback not firing

function doJsonp()
{
alert("come to ajax");
    $.ajax({
        url: url,
        dataType: "jsonp",
        crossDomain: true,
        jsonpCallback:'blah',
        success: function() { console.log("success"); }, 
        error: function() { console.log("error"); } 
    });
}

Then check your json data if it is coming it is valid or not..

Thanks

score 0 · Answer 4 · answered May 23 '12 at 12:18

0

One weird thing I've noticed about $.ajax is that if the content-type doesn't match exactly it's not considered a success. Try playing around with that. If you change success to complete (and fix the arguments) does it alert?

answered May 23 '12 at 12:18

CambridgeMike

4,562
1
28
37

score 0 · Answer 5 · answered May 23 '12 at 12:22

It's not working because your server does not render a JSONP response. It renders a JSON response.

For JSONP to work, the server must call a javascript function sent by the ajax request. The function is generated by jQuery so you don't have to worry about it.

The server has to worry about it, though. By default, this function's name is passed in the callback argument. For example, the URL to the server will be http://some.domain/ajax.php?callback=functionName (notice callback=functionName).

So you need to implement something like the following on the server side (here in PHP):

$callback = $_GET['callback'];
// Process the datas, bla bla bla
// And display the function that will be called
echo $callback, '(', $datas, ');';

The page returned will be executed in javascript, so the function will be called, so jQuery will call the success function.

JSON data not responding

5 Answers5