CODEWITHSUNDEEP
javascriptjqueryjsonjsonp
J.K.A.
J.K.A.

Reputation: 7404

JSON data not responding

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.

Upvotes: 2

Views: 1600

Answers (5)

Andrew Moore
Andrew Moore

Reputation: 95364

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.

Upvotes: 1

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

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

Upvotes: 0

Florian Margaine
Florian Margaine

Reputation: 60767

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.

Upvotes: 0

CambridgeMike
CambridgeMike

Reputation: 4622

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?

Upvotes: 0

Sunil Dodiya
Sunil Dodiya

Reputation: 2615

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);
 }

Upvotes: 1

Related Questions