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">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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