Executing JavaScript inside Content Panes
by Josh Trutwin

dijit.layout.ContentPane widgets are an invaluable tool for many common layout tasks. You can update the content inside one of these panes via the setContent or setHref methods, unfortunately if your content contains any JavaScript via inline script tag or script tag with src attribute you might be surprised to find out that it will not execute. How do you get around this?

Back in the 0.4 days of dojo, the ContentPane widget (then called dojo.widget.ContentPane) had an executeScripts parameter and also a somewhat confusing scriptSeparation parameter to deal with scoping. Setting executeScripts=”true” on your content pane caused any JavaScript inside the pane content to execute when content was initially loaded.

When dojo 1.0 was released (well, technically 0.9) the ContentPane layout widget removed the executeScripts parameter to make a leaner widget, removing a complicated feature that most content panes do not use. The demand for this feature created the need for a new content pane, which was placed in dojox as dojox.layout.ContentPane. This new widget supports the executeScripts parameter, and thankfully removed the need for the 0.4 scriptSeparation parameter.

So, long story short, if you need to execute JavaScript inside your content panes, use dojox.layout.ContentPane instead of dijit.layout.ContentPane and set executeScripts=”true”. Actually executeScripts defaults to “true” but might be a visual cue down the road as to why you are using dojox.layout.ContentPane.

A couple notes on this:

  1. dojox.layout.ContentPane is an extension of dijit.layout.ContentPane, so anything that you can do with dijit’s content pane you can also with dojox’s.
  2. Even though this is in dojox, this layout widget is well tested and should be considered production ready.
  3. There are a couple additional parameters added in the dojox content pane, namely: adjustPaths, cleanContent, renderStyles, scriptHasHooks. Look over the source or the forum link below for additional information on these.
  4. Your content (either via setContent or setHref) can even include additional dojo widgets, you only need to load dojo.js in the calling/parent page. You can call dojo.require(…) inside your pane’s content as well. If parseOnLoad (from dijit.layout.ContentPane) is true, which it is by default, then the dojo parser will create the widgets in your pane’s content.
  5. Many other layout widgets are children of dijit.layout.ContentPane. So if you want to have a Dialog widget that has the ability to execute scripts, you need to roll your own (say dojox.Dialog) that is a child of dojox.layout.ContentPane instead of dijit.layout.ContentPane. This is a fairly simple change usually requiring only a couple search/replaces.
  6. You can also execute scripts with dijit.layout.ContentPane in the contentpane definition via dojo/method - but this is defined where the content pane is defined. For example:
<div id="foo" dojoType="dijit.layout.ContentPane" href="/some/page.html">
   <script type="dojo/method">
      alert ('Hello World!');
   </script>
</div>

This all applies to dojo 0.9+. Keep an eye out on the release notes for future releases as there has been some talk on forums/IRC on ways to combine these features back into one widget, but it does not sound like anything will change soon with the current setup.

More information:

Forum post with explanation of dojox.layout.ContentPane on bottom
dijit.layout.ContentPane in dojo book
Content Pane porting guide for 0.4 to 0.9, describes changes from 0.4
dijit.layout.ContentPane API page
dojox.layout.ContentPane API page

Tags: , , ,

This entry was posted on Wednesday, July 30th, 2008 at 6:11 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Executing JavaScript inside Content Panes”

  1. barcia Says:

    Can a dojox.layout.ContentPane be nested in dijit.layout.ContentPane (which is part of a BorderContainer). I have the following:

    Electronic and Movie Depot !!

    Catalog
    Shopping Cart
    Previous Orders
    Account

    But the dojox.layout.ConetentPane is overlaying the whole BorderContainer.

  2. barcia Says:

    forget it, my error

Leave a Reply

You must be logged in to post a comment.