javascript - Dojo Parseonload:false Then not loading Dojo modules

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 oute.

Index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".dtd">
<html lang="en" xml:lang="en" xmlns="">
 <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=".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=".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" ".dtd">
<html lang="en" xml:lang="en" xmlns="">
<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=".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=".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

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 oute.

Index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3/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./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./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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3/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./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./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

Share Improve this question edited Mar 3, 2010 at 22:16 ghoppe 21.8k3 gold badges31 silver badges21 bronze badges asked Mar 3, 2010 at 7:28 gggggggg 212 silver badges4 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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,.

Try more sophisticated selector like dojo.query to pinpoint the exact Dom you want.

if you want to select a dijit for the parser you need to do it with dijit

dojo.parser.parse(dijit.byId("a"))

if you use dojo, it will select the dom node. if you use dijit it will select the widget

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dojo Parseonload:false Then not loading Dojo modules - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)