Help using Mootools and JSONP

Question

I am having a really hard time trying to get this to work. All I require is to console log the object that is returned. I see nothing at all in the log although the script tag is getting injected into the head.

JSON:

jsonFeed({
    "results":{
        "loggedin": "No",
        "username": "",
        "company": ""
    }
});

JS:

function jsonFeed() {

}

window.addEvent('domready', function() {

    new Request.JSONP({
        url: <correcturl>,
        onComplete: function(data){
            console.log(data); // Nothing returned

        }
    }).send();

});

Any help is greatly appreciated.

UPDATE

I have removed the jsonFeed function at the top and changed the existing code to:

new Request.JSONP({
    log: true,
    url: loginstatus,
    callbackKey: 'jsonFeed',
    onComplete: function(data){
        console.log(data); // Nothing returned

    }
}).send();

In the log I get:

JSONP retrieving script with url:http://thedomain/LoggedStatus.aspx?jsonFeed=Request.JSONP.request_map.request_0
jsonFeed is not defined

In the this gets injected:

<script type="text/javascript" async="true" src="http://thedomain/LoggedStatus.aspx?jsonFeed=Request.JSONP.request_map.request_0"> 

-- if I expand this I see the JSON --


</script>

so a) I'm getting the jsonFeed not defined error and b) the onSuccess isn't firing :(

I really do appreciate all your help guys. And I am sorry if I am missing the point :(

UPDATE

added:

this.jsonFeed = function(data) {
    console.log(data);
};

.. and it works. Thank you @Dimitar

I still don't quite understand it but now it works it helps when working it out.

Answer 1

it does not work because your callback function name ignores the one that Request.JSONP sends and returns jsonFeed instead.

http://mootools.net/docs/more/Request/Request.JSONP

callbackKey (string: defaults to callback) the key in the url that the server uses to wrap the JSON results. So, for example, if you used callbackKey: 'callback' then the server is expecting something like http://..../?q=search+term&callback=myFunction; This must be defined correctly.

here's an example class i wrote that gets stuff off of flickr - who use a custom callback key - it's fine. http://fragged.org/mootools-flickr-api-class-via-request-jsonp_1042.html (p.s. jsfiddle may be slow atm, friday 13th thing!)

the other thing is, if the remote end CONTINUES not to work with you and refuses to send data in the correctly wrapped format, eg:

Request.JSONP.request_map.request_0({data})

then you need to actually make sure that

this.jsonFeed = function(data) {
    console.log(data);
};

where this is the global object (eg, window) - you cannot scope this, so careful where the function is defined.

if doing the latter, jsonFeed will then take the role of a callback oncomplete function.

another way is to do this, which will map the native callback function defined by the class and export it to the one your remote host likes:

onRequest: function() {
    var lastCallback;
    Object.each(Request.JSONP.request_map, function(el) {
        lastCallback = el;
    });
    window.jsonFlickrApi = lastCallback;
},
onComplete: function(data) {
...
}

Answer 2

jsonFeed(
    return //or anything else that will make this piece of data recognizable on your page
    {
    "results":{
        "loggedin": "No",
        "username": "",
        "company": ""
    }
});




new Request.JSONP({
        url: <correcturl>,
        callbackKey: 'jsonFeed'
        onComplete: function(data){
            console.log(data); // Nothing returned

        }
    }).send();