Monday, May 9, 2011

JQuery, JSONP, and fun

I just created the first release version my twitter widget! It was not an easy process as I haven't ever really debugged anything in javascript before.
Many of my issues were due to this line:
$.getJSON(jsonurl+"&callback=?",{},function(json){ 
a whole bunch of code follows

While making that line and encountering numerous errors I discovered the following facts:

JSON is not the same as JSONP, and due to extremely valid browser security restrictions you can't access JSON files from outside your domain- JSONP, on the other hand, is fine because your browser interprets it as a script.

Twitter needs a callback=? parameter passed in order for it to give you JSONP instead of JSON.

Javascript will automatically place the function {} in place of that ?
Giving the function(json){a whole bunch of code follows} in place of that {} causes it to not work in some circumstances.

Now that those issues have been resolved the twitter widget works properly. It can either display tweets by searching for them or by showing all the ones from a given user.

You can check it out at http://pastebin.com/DUnqw0n6 . Please save it into a file named twitterWidget.js
An HTML file that will test it can be found at http://pastebin.com/GbnGQvB9 . It needs to be placed in the same directory as twitterWidget.js
You also need dashBoard.js, which needs to be placed one directory up from the other two files and can be found at http://pastebin.com/0i7kLEsa

No comments:

Post a Comment