SubClosure

{ Don't Repeat Yourself ! }

Browsing Posts in javascript

Most examples these days use jquery to load jsonp data.
If you want to develop a simple javascript widget then it might not be a good option to include jquery in your code.
In this example I’ll show you how to load html from a server in any domain and display it with a javascript.

It’s actually very simple to load jsonp data without using any javascript libraries.

The trick is to load your data in a script tag like so:

<script type="text/javascript" src="http://subclosure.com/demos/getjsonpdata.php"></script>

The  server  needs to return a json object that is wrapped in a function, e.g.:

callback({"html":"hello jsonp"})

In PHP you can do it easily like this:

echo 'callback(' . json_encode(array('html' => 'hello jsonp')) . ')' ;

Now when this script is loaded into the browser, it will  call the function named callback (you can call this function whatever you like).

You just need to provide a handler for this function call and that’s pretty much it:

<div id = 'mycontent'></div>
<script>
  function callback(jsondata){
     document.getElementById('mycontent').innerHTML = jsondata.html ;
   }
</script>
<script type="text/javascript" src="http://subclosure.com/demos/getjsonpdata.php"></script>

 

Here is a working script example: http://subclosure.com/demos/getjsonp.html

Has your facebook LIKE button suddenly disappeared from your website, even though you didn’t make any code changes?

It surely disappeared on my page over night and after a quick look at the javascript error log, I found this error in the http://connect.facebook.net/en_US/all.js script: e.root is undefined

After a bit of googling I found a solution:

just before the div that contains the facebook javascript add another div with the id “fb-root” like so:

<div id=”fb-root”></div>
 <div class=”facebook-button” >
 <script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
 <fb:like show_faces=”false” width=”200″ font=””></fb:like>
</div>

and … working again !

Get Adobe Flash player