JSONP Callback Function inside jQuery Plugin

Question

I'm writing my first jQuery plugin and looking for some help making a JSONP request inside it.

Normally I setup my JSON data inside of a callback function like so

saveDataCommunityPartners({
    "newsBlockItems": [
        {
            "title": "title title title",
            "img": "item-img.jpg"
        },
        {
            "title": "title title title",
            "img": "item-img.jpg"
        }
        ... and so on and so forth
    ]
})

Then on a page I call .getJSON() like so:

$.getJSON("http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/json/json-redesign-communitypartners.js?callback=?");

And set up the callback function

function saveDataCommunityPartners(data) {
    alert("got data");
}

And everything works fine. How would I get this to work inside my plugin? If I do it like it is below, I'm getting a "Uncaught ReferenceError: saveDataCommunityPartners is not defined" error.

(function($) {
    $.fn.createNewsBlock = function( options ) {
        // Establish defaults
        var settings = $.extend({
        thisData        : {},
        pageFilter      : "community"
    }, options);

    $.getJSON("http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/json/json-redesign-communitypartners.js?callback=?");

    function saveDataCommunityPartners(data) {
        alert("got data");
    }
}(jQuery));

I can either change the plugin, or how I set up the JSON file itself, whatever is recommended. Thanks!

cafekun · Answer 1 · 2014-05-15T00:18:43.417

1

The getJSON method has a callback feature that you can use.

$.getJSON("http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/json/json-redesign-communitypartners.js?callback=?",function(data){

saveDataCommunityPartners(data);

});

OR use the chained command

$.getJSON("http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/json/json-redesign-communitypartners.js?callback=?").done(function( data ) {

saveDataCommunityPartners(data);

})

You can also relocate the saveDataCommunityPartners function outside the JQuery container if the error still persists.

edited May 15 '14 at 00:18

answered May 15 '14 at 00:13

cafekun

158
2
13

hm neither of those seem to be working (getting the same error). I basically just need to store the data in a variable. and I need to do this inside the jQuery container because the plugin needs to parse through the data to find some things – dougmacklin May 15 '14 at 01:45

score 0 · Accepted Answer · edited May 23 '17 at 12:27

Got it working using this code from here:

$.ajax({
    type: 'GET',
    url: "http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/json/json-redesign-communitypartners.js?callback=?",
    async: false,
    jsonpCallback: 'saveDataCommunityPartners',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
        parseJSON(json); // pass to function to use for whatever
    },
    error: function(e) {
        console.log(e.message);
    }
});

Note that originally in the success function I tried to store the json in a variable called data like so: data = json;, but ran into problems as this does not ensure that the json will have returned by the time data could be accessed. See this question for more info on that end.

JSONP Callback Function inside jQuery Plugin

2 Answers2