views:

703

answers:

3

Hello, I have some Dijit Tabs, and in those tabs I have some Dojo Text boxes and Fields. Some of my Dojo Tabs load when the page is loaded, and some load only when clicked on.

My issue is that I cant get the Tabs that load only when clicked, to work with the Dojo modules.

Its hard to explain, so I made a simple example to help. I have included as much around the code that I think may have any effect on the outcome.

Index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>

   <script type="text/javascript">
     dojo.require('dijit.layout.TabContainer');
    dojo.require('dijit.layout.ContentPane');
           dojo.require("dijit.form.DateTextBox");
   </script>

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" /> 

 </head>

<body class="tundra">

Works Outside of a Tab: <input class="tundra" id="outsideworking" name="outsideworking"  type="text" dojoType="dijit.form.DateTextBox"> 
<br><br><br>
 <div id="tab" dojoType="dijit.layout.TabContainer" style="width:50%;height:200px" >

 <div id="tab-working" dojoType="dijit.layout.ContentPane" selected="true" title="Loads on Page Load">
  Test working
                 <input class="tundra" id="working" name="working"  type="text" dojoType="dijit.form.DateTextBox"> 
       </div>

 <div id="tab-notworking" dojoType="dijit.layout.ContentPane" title="Load On Click" preload="false" parseOnLoad="false" href="loadafter.php">
       </div>

 <div id="tab-simplenotworking" dojoType="dijit.layout.ContentPane" title="Load On Click with Simple File" preload="false" parseOnLoad="false" href="simple.php">
       </div>

 </div>

</body>
</html>

loadafter.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
        dojo.require("dijit.form.DateTextBox");
</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" /> 



</head>

<body class="tundra">

Outside of a Tab


  Not working here:
                 <input class="tundra" id="notworking" name="notworking"  type="text" 

    dojoType="dijit.form.DateTextBox"> 

</body>
</html>

simple.php

<input class="tundra" id="simplenotworking" name="simplenotworking"  type="text" dojoType="dijit.form.DateTextBox">

Is anyone able to help point me in the right direction?

Thanks gggggggg

A: 

In short, if you have set parseOnLoad as false, you need to parse the html fragment by yourself. And for your tab pages, if you clicked a tab, you may need to parse the tab page manually.

For example:

<div id='a'><input id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox"> </div>

You can use dojo.parser.parse(dojo.byId("a")) to render the widget.

Btw, you do not need to attach tundra class in every places of dijit widgets, it just need to be placed at the body tag,.

virsir
A: 

Thanks Virsir, I tried this, by doing this:

<script type="text/javascript">
function open_simpletab() {
dijit.byId('tab').selectChild(dijit.byId('tab-simplenotworking'));
dojo.parser.parse(dojo.byId('a'));
}
</script>

And calling it from a button:

<button type="button" onclick=" open_simpletab();" class="next">Simple Tab</button>

But I get this error.

Message: Tried to register widget with id==tab-working but that id is already registered
Line: 8
Char: 466
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/_base/manager.xd.js

Any thoughts on this?

THanks gggggggg

gggggggg
That error is very common in dojo world as you are trying to render two or more widgets with the same ID, that was not allowed. You need to attach different id for different tab.
virsir
But its for the tab that was already there?
gggggggg
Is there a way I can limit the :dojo.parser.parse(dojo.byId('a'));To only parse the ID 'a' ?
gggggggg
A: 

Does anyone else have any ideas?

gggggggg