CODEWITHSUNDEEP
jqueryjsonp
Greg Pettit
Greg Pettit

Reputation: 10830

jQuery and JSONP - cross-domain and also same domain

I understand the theory of how JSONP works, but something about the particulars or syntax is eluding me. The example I'm working on is a "quotation rotator", which was working fine on a single domain with JSON, but I want to use it on another domain as well, only updating the one data source.

(side note: it's strange to me that requesting from mydomain.com pops a CORS issue when the calling domain is subdomain.mydomain.com. Wish subdomains weren't affected!!)

I have a JSON file that I have padded with a static function, like this:

quotator.testimonialFetch(
{
    "testimonials": [
        {
            "quote": "Amazing product!",
            "quotedName": "Somebody",
            "quotedTitle": "Director of Yoyos",
            "company": "Kramerica",
            "products": ["product1"],
            "yearmonth": 201212,
            "active": true
        },
        {
            "quote": "Never seen anything like it.",
            "shortquote": "When quote is too long, use this.",
            "quotedName": "Fflewddur Fflam",
            "quotedTitle": "",
            "company": "Prydain",
            "products": ["product1","product2"],
            "yearmonth": 201212,
            "active": false
        }
    ]
}
);

Instead of using the $.getJSON shorthand (appending the callback), I use the more verbose $.ajax() method:

$.ajax({
   type: 'GET',
    url: 'http://www.mydomain.com/assets/testimonials.json',
    async: false,
    jsonpCallback: 'quotator.testimonialFetch',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.log('success!');
       console.dir(json.testimonials);
    },
    error: function(e) {
       console.log('some sort of error!');
       console.log(e.message);
    }
});

It doesn't log a success, but DOES log an error, whether I'm making the call from within mydomain.com or sub.mydomain.com. The error is that something is "undefined". Not sure what that might be.

So, the main thing is... not sure where to put the processing logic. Should it go right into the callbacks of the $.ajax()? I indeed created a function matching the padding name, and it does receive the data object:

quotator.testimonialFetch = function(data) {
// using the document ready function as a safety net; maybe I don't need to defer?
$(document).ready(function() {
        quotator.quoteobj = data.testimonials;
        console.log(quotator.quoteobj); // logs the object I'm expecting! Yay!
        };
    });
}

It's not too important to know what it does, or at least I don't think it matters. What matters is:

-When making the $.ajax() call from sub.mydomain.com, the logic kicks in, the quotes are processed, and the result is sort of a success... "sort of" because although JSONP is returned by the $.ajax call, the error callback is triggered and then the data is processed correctly with the callback function...?!

-When making the $.ajax() call from mydomain.com, I get the object I want, but I can't process it. I can see my JSONP response, but there is no processing in the $.ajax success callback itself because the error callback is triggered instead. And then the quotator.testimonialFetch() is not triggered... due to being same-domain rather than cross-domain?

Thanks for your time.

Upvotes: 2

Views: 267

Answers (1)

Blazemonger
Blazemonger

Reputation: 93003

You can't do error callbacks or synchronous AJAX using JSONP. The docs don't seem to make an exception for same-server calls.

Upvotes: 1

Related Questions