ContentPane in dojo not loading scripts? This is how you fix it.

December 16th, 2010 by rvdavid Leave a reply »

I was planning on writing my first enquiry on how to do something in dojo, but just before I pressed the submit button, I thought I’d look into one more thing and as the saying goes – “it’s always in the last place you look” (probably because you stop looking after you find whatever it is you’re looking for).

So the problem I had was that I wanted to load a datagrid inside a contentPane in a pet project my newbie friends and I are using to sharpen our Zend Framework skillz.

I’ve been idle (and will continue to be for the rest of the year) so all my tickets are pretty much at a stand still. This included a ticket which reports that a remote datagrid does not load properly in chromium / google chrome, but loads fine in Firefox. But seeing as I have a few hours to kill from being idle (development wise, but actively looking after family) , I thought I’d do an idle search into why this was happening. Dojo could not possibly have a bug, there must be some magic attribute that needed to be set which would make it all better.

So I started my search. Looking for things like “ContentPane not loading datagrid in tabContainer dojo” through to “javascript events not firing in contentPane dojo dijit” for those of you who look for answers to advanced questions when it comes to the dojo toolkit, you know how teeth-gnashingly frustratting it is to look for answers.

A couple of them mentioned “executeScript” attribute, but that was from ages ago, so I tried it a couple of times to no avail in dojo 1.5 then gave up looking for answers that use executeScript attribute.

Again. I can’t help but feel that I’ve been left high, dry and wanting to put my fist through my laptop. This was not going to be productive, so I thought I’d make a post on the dojo community mailing list instead.

I typed in this nice, humble, non-aggressive request for support, but then I thought I’d try one last time. Did a google search for “executescript contentpane dojo” – and what’s the first result? a dojocampus.org article / blog post on: (wait for it) Executing JavaScript inside Content Panes I swear blind it was not there when I had looked for it – but this post was apparently here all along, since 2008 even!

After reading this post, it was clear.

This is what happened and why my remote datagrid did not load in the contentPane.

  1. I use Zend Framework Dojo view helpers – since it was how I got introduced – well, thrown into the fire, really, of the dojo toolkit:
    • Fancy schmancy tab containers
    • contentPane containers which made it a breeze to load remote content
    • a fabulous platform for an RIA!
  2. Zend_Dojo_View_Helper_ContentPane uses dijit.layout.ContentPane; this minor detail is abstracted from the developer using the ViewHelper to create contentPanes.
  3. The dijit.layout.ContentPane will not execute any script blocks you have inside it. It was a lot of hassle trying to figure it out.
  4. What I really needed was the dojox.layout.ContentPane and _not_ dijit.layout.ContentPane which was provided by default by the ContentPane view helper.
  5. As a quick test, I changed the dijit and module attributes in the Zend_Dojo_View_Helper_ContentPane view helper and…
  6. There it was! A fully firing remote script in a ContentPane.

I swear there was a f*cking chorus of angels behind me singing with angelic voices “ahhhhhhhhhhh you f*cking goooooot iiiiiiit fiiiinalllllllyyyyyyyyyyyyyyyyyyyyyyyyyyy ahhhhhhhhhhhhhh” a halo radiated above my monitor and I was levitated into 3d space like the Rotate Cube effect on my ubuntu desktop environment.

What I’ll be doing next is creating my own view helper Rvdavid_View_helper_Dojox_ContentPane, copying the Zend_Dojo_View_Helper_ContentPane, then changing the protected variables $_dijit and $_module from dijit.layout.ContentPane to dojox.layout.ContentPane. using now is the CustomDijit view helper and specifying dojox.layout.ContentPane as the dojoType attribute as seen on the example on the Zend Framework for CustomDijit view helper in the Zend Framework Dojo View Helpers documentation for contentPanes which need to execute javascript.

Moral of the Story: Use dojox.layout.ContentPane instead of dijit.layout.ContentPane

So to conclude, I’ll state it again: to load remote scripts into a contentPane, you need to use dojox.layout.ContentPane which has executeScripts enabled by default and not dijit.layout.ContentPane which does not have this option.

I suppose I could have just told you that you needed to use dojox.layout.ContentPane rather than dijit.layout.ContentPane, but then I couldn’t have dragged you through all the sh*t I went through to find it. Story of a developers life I suppose. Days of research and trial and error only to deliver one line of code.

Back to idling! :)

Till next time.

if you enjoyed this post, make sure you subscribe to my RSS feed!
You can also follow me on Twitter here.

Related posts:

  1. Two Dojo JavaScript Gotchas that got me
  2. Project Chronus: a Zend Framework/Dojo/Doctrine Project Quietly Launched
Advertisement

11 comments

  1. JAK says:

    David,

    We faced this wierd issue and found the whole thing works by adding
    . after the other script tag and found this work around really wierd. But this had issues in IE while it works fine in FF4.

    With your suggested fix, it works like a breeze in both FF4 & IE8.

    Thanks for taking time.

  2. serans1 says:

    Thanks !!!!

  3. MC says:

    You saved me SO much time – I was completely lost on this contentpane issue. It should really be documented clearly for those who modularize their layouts.

    • rvdavid says:

      There’s a lot of things that should be documented with Dojo :) They’ve made leaps and bounds with documentation though. You should have seen what it was like 2 years ago.

      If you ever get stuck though, the guys who frequent the IRC channel are very helpful.

  4. marcel says:

    A month ago I wasted couple of hours myself trying to figure out the problem with dijit.layout.ContentPane, then I gave up. Today I have come across your blog; what a nice surprise to find the solution. Thanks dude for sharing!

  5. Random guy says:

    You sir just saved a lot of my time. Thankyou!

  6. kalaiselvan says:

    if you have body onload on inside the content it’s still not executing.

    i tried adding the below function , then its working fine on body onload

    dojo.addOnLoad(function() {
    openURL(‘google.com”);
    });

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.