How to load JSONP inside requireJS?

Question

I'm trying to get a JSONP file to load in requireJS. The docs say it should work like this:

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

My config.json looks like this (no line breaks):

config({
    "default_language":"de-DE",
    "language_current":"de-DE",
    "language_selector":"translate",
    "language_set":"false"
});

So my require call should be:

require(["http://example.com/api/config.json?config=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

but doing so only returns config (the callback function!) is undefined. I have been sitting over this for a while now... and got it to work like this using the async plugin, but this syntax will not work, because I'm declaring a function outside of a define context.

var config = function(data) {
    var settings = {};

  // create application settings
  settings.language_default = data.default_language || "en-EN";
  settings.language_current = data.language_current || priv.settings.language_default;
  settings.language_selector = data.selector || "translate";
  settings.language_set = data.language_set || false;

  console.log(settings);
  // return response object
  return settings;
};

define([
    'async!http://example.com/api/config.json!config'
  ],
  config
);

This seems to work, because now I specifically name the callback function config.

I guess everything would be ok, if I could pass in config as name of my define-callback function, but the only way I was able to do it is the above.

Question:
How do I correctly load a JSONP file in requireJS either using the default way by requireJS or the loader plugins provider here [https://github.com/millermedeiros/requirejs-plugins/blob/master/examples/async.html]?

This works perfectly fine with a static file loaded from S3:

define([],
    function () {
        $.ajax({
            url: "http://www.example.com/api/configuration.json",
            dataType: "jsonp",
            jsonpCallback: "config", /* Unique function name */
            success: function(data){
                /* Do something with data */
                console.log(data)
            }
        });
    }
);

So why does it not work when being done inside requireJS?

THat's not JSONP. You need to write server-side code to handle `callback=`. — SLaks, Jul 17 '13 at 14:03
so I cannot just store a hardcoded file with callback({"foo":"bar"});? — frequent, Jul 17 '13 at 14:06
@SLaks: works no problem using `$.ajax` from a static server (see my edit). — frequent, Jul 17 '13 at 14:14

score 2 · Answer 1 · answered Aug 10 '16 at 23:19

You are missing one thing:

http://requirejs.org/docs/api.html#jsonp

You should use like this:

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

The callback is the object wrapped in the jsonp:

If your callback is define then use define

define({
    "default_language":"de-DE",
    "language_current":"de-DE",
    "language_selector":"translate",
    "language_set":"false"
});

score 0 · Answer 2 · answered Jul 17 '13 at 15:08

Ok. This works.

define(["async"],
    function () {
        callback = function(d) {
            console.log("callback called");
             console.log(d);
        };

        require([
            "async!http://www.example.com/api/configuration.json"
        ],
        callback
        );
    }
);

Maybe also someone else.

score 0 · Answer 3 · edited Apr 09 '15 at 06:30

0

I had a similar problem , had to resort to using $.ajax() to load the gapi script. .

edited Apr 09 '15 at 06:30

Amit Joki

58,320
7
77
95

answered Apr 09 '15 at 01:16

I.Tyger

715
1
8
19

How to load JSONP inside requireJS?

3 Answers3