This project is read-only.

FlexBox in a Google gadget

Jul 2, 2009 at 1:09 PM


I am trying to load FlexBox in a google gadget compatible container (technically an Apache Shindig). Once I include flexbox, I get the really weird situation that the google onload handler no longer works. This is the interesting bit of my gadget.

In a google gadget, the registerOnLoadHandler should essentially works the same as $.ready(...). As you can see I have tried both approaches, but initgadget() never runs. Actually, none of the initial javascript seems to run at all (the part marked with // initialization function and onload handlers). All other javascript (that fired with onClick, onSubmit etc etc) works as it is supposed to. I am using Firebug but the console is silent. Since Shindig runs the gadgets inside an IFRAME, it is a bit of a bugger to debug, but i have tried calling the debugger just below that // part, and it doesn't fire.

So, I am a bit stumped...anyone with any ideas? thanks in advance :)


<script type="text/javascript" src=""></script> <script type="text/javascript" src="/gadgets/files/js/innerXHTML.js"></script> <script type="text/javascript" src="/gadgets/files/js/mig/migjobs.js"></script> <script type="text/javascript" src="/gadgets/files/js/jquery.flexbox.min.js" /> <link type="text/css" rel="stylesheet" href="/gadgets/files/css/jquery.flexbox.css" /> <script type="text/javascript"> // initialization function and onload handlers

function initgadget() { migjobs.initsubmitjob(); } gadgets.util.registerOnLoadHandler(initgadget); $.ready(function() { initgadget(); }); // gadgets.window.adjustHeight(600); </script>
Jul 2, 2009 at 7:22 PM

Have you tried noConflict?

jQuery.ready(function() {

Jul 2, 2009 at 8:22 PM
I tried your suggestion, and it seemed to do absolutely nothing from what I can tell. Then I tried reversing the include order, loading FlexBox before my own small script, with no visible changes.
Then I tried going back to the gadgets.registeronloadhandler way, and suddenly I got an error in the firebug console saying "migjobs is not defined". This is fairly odd because if I then remove the two references to flexbox,
everything works as it supposed to. I ran jslint on my own script, and it seems to have no errors.

Contrary to earlier though, simply reordering the statements causes the debugger; statement to kick in now.
This may very well be something specific to the way gadget containers (iGoogle) work. It's a long tale but they render a fun combination of iframes, caja-javascript filtering and whatnot.

Thanks for taking time to try to help :)

<script type="text/javascript" src=""></script> <script type="text/javascript" src="/gadgets/files/js/jquery.flexbox.min.js" /> <link type="text/css" rel="stylesheet" href="/gadgets/files/css/jquery.flexbox.css" /> <script type="text/javascript" src="/gadgets/files/js/mig/miggadget.js"></script> <script type="text/javascript" src="/gadgets/files/js/innerXHTML.js"></script> <script type="text/javascript"> debugger; function init() { migjobs.init(); } // either this // gadgets.util.registerOnLoadHandler(init); // or this: jQuery.noConflict(); jQuery.ready(function() { init(); }); </script>


Jul 2, 2009 at 8:43 PM

Well, I solved my own problem, and so coming off as the typical internet noob developer.

For anyone else wanting to give this a shot on iGoogle/Shindig, this is what I did that ended up providing a useful result.

  • Reordered the load order as seen in the last example above. I have zero idea what/if that actually did.
  • Don't rely on the jquery ready, use gadgets.util.registerOnLoadHandler.
  • When you go about renaming files in the middle of things, do make sure the target cache has properly cleared by invoking 'mvn clean' on the server ;)

To the FlexBox developers/community: thanks for making FlexBox available!

Jul 2, 2009 at 9:03 PM

Thanks for posting the solution!