Question

I have the following code:

window.addEvent('domready', function() {
    console.log('starting twitter stuff');
    var twitter = $('twitter');
    var jsonReq = new Request.JSON({
        method: 'get',
        secure: false,
        url: 'http://search.twitter.com/search.json?q=%23rhschelsea&rpp=1&include_entities=false&result_type=recent',
        onRequest: function() {
            twitter.set('text', 'Loading...');
        },
        onComplete: function(response) {
            twitter.set('text', 'Loaded tweets');
            console.log(response);
            console.log('foobar');
        }
    }).send();
});

I’m seeing “foobar” in the console. I’m seeing “Loading…” and then “Loaded tweets” on the page. But I’m seeing “undefined” where I’m logging the response variable.

Any thoughts why? The URL works and if I put it into the browser I can see JSON.

Answer 1

you cannot use Request.JSON on a remote domain due to XSS / same origin policy – it is based on Request which is simple XHR. use Request.JSONP instead, which is script-based, hence not subject to domain limitations, here’s a working fiddle:

http://jsfiddle.net/dimitar/B5rF4/

JSONP it’s available in mootools-more.

twitter reacts to adding callback=foo to the url you supplied by wrapping it into the requested callback foo({...}), which makes it JSONP-compliant.