Question

I have a Dojo tab-container and when I click on certain buttons, a new tab is added dynamically with its contents downloaded via Ajax. The tabs contain dynamic form elements which are parsed and loaded by Dojo just fine. I am also including Javascript blocks which are specific for each tab and those are downloaded as well via Ajax… however, none of the Javascript blocks execute!

Example of tab content:

<input id="test" name="test" type="text" dojoType="dijit.form.ValidationTextBox" />

<script type="text/javascript">
   dojo.connect(dijit.byId('test'), 'onClick', function(evt){
       alert('testing 123');
   });
</script>

However, if I do this instead the events trigger just fine:

<input id="test" name="test" type="text" dojoType="dijit.form.ValidationTextBox">
    <script type="dojo/method" event='onClick'>
         alert('testing 123');
    </script>
</input>

My question is, why don’t Javascript blocks in the first example work? is this a Dojo limitation? Also, I am also trying to set properties and values for the widgets AFTER they’ve been loaded. How do i active that given I have to use something like dojo.addOnLoad() which won’t work because it requires a Javascript block and that doesn’t work as per the first example… There is no equivalent widget onLoad event so I can’t use the second method either… Any ideas how to go about doing this?

Answer 1

The “tab content” is actually a Content Pane element. You can’t call a javascript inside a content pane unless you use <script type="dojo/method">. At least this is what I know.

Update: ifyou’ll use dojox.layout.ContentPane instead of the dijit.layout.ContentPane all the problems regarding the js inside it will vanish. From Dojo Reference Guide:

dojox.layout.ContenPane is an extension to dijit.layout.ContentPane providing script execution, among other things.