Why doesn't my Google gadget render properly?

I am making a gadget that displays a bar of famous buttons : Facebook like, Tweet, Google Plus and LinkedIn Share.

If you paste the gadget HTML to the editor here you will see that it is displays fine.

What my Gadget code does is basically load the HTML content and put it inside a div element as follows :

<Content type="html">
<![CDATA[
<div id="content_div"></div>
<script type="text/javascript">

function displayButtons (){ 
      var params = {};
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
      var url = "http://hosting.gmodules.com/ig/gadgets/file/109164222302601753554/share_bar.html";
      gadgets.io.makeRequest(url, adjust, params);
    }

    function adjust(obj){
      document.getElementById('content_div').innerHTML = obj.text;
    }

    gadgets.util.registerOnLoadHandler(displayButtons);
</script>
]]>
</Content>

When I test it in iGoogle or Google Sites, all I get is Tweet text hyperlink.

Could anyone help me figure out what is wrong please?

Solution

I get a XML rendering error when I put the address of the content you are trying to include into the browser, both in Firefox and Chrome. In IE9 the page is just blank.

Chrome may have the best hint:

This page contains the following errors:

error on line 5 at column 28: Namespace prefix g on plusone is not defined

error on line 18 at column 54: Namespace prefix fb on like is not defined

Below is a rendering of the page up to the first error.

Tweet

So have a look at the share_bar.html file first.

EDIT The content you are trying to insert contains multiple SCRIPT tags. It seems that browsers take an issue with the script injection you are trying to perform by setting the innerHTML property of your element.

The solution that worked for me once I tested it in Shindig/Partuza combo testing environment (which is close to iGoogle and other OpenSocial containers) was to use jQuery to do the inserting.

Thus I first loaded jquery lib at the top of the module content section like this:

<Content type="html">
<![CDATA[
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"> </script>
<div id="content_div"></div>
...

And then instead of manipulating the innerHTML property, I called the useful ".html" method (http://jqapi.com/#p=html):

function adjust(obj){
  $('#content_div').html(obj.text);
}

Hope this helps.