Login Register

[Resolved] DOJO + AJAX + Theme Tundra (display problems)

Hello, I'm creating an application with dojo and when i use ajax with dojo.xhrGet dynamic content is not displayed with theme tundra. Moreover, if my dynamic content use a dijit.form.DateTextBox the browser just display a html textbox.

Here are my scripts :

test.htm

<head>
  <title>Hello, Ajax world!</title>
  <style type="text/css">
        @import "js/dojo1.1.1/dijit/themes/tundra/tundra.css";
        @import "js/dojo1.1.1/dojo/resources/dojo.css";
  </style>
  <script type="text/javascript" src="js/dojo1.1.1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
  <script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dijit.form.DateTextBox");
  </script>
  <script type="text/javascript">
    function changeContenu(newHref) { // ?
      dojo.xhrGet( { // ?
        // The following URL must match that used to test the server.
        url: newHref,
        handleAs: "text",
        timeout: 5000,

        // The LOAD function will be called on a successful response.
        load: function(response, ioArgs) { // ?
          dojo.byId("contenu").innerHTML = response; // ?
          return response; // ?
        },

        // The ERROR function will be called in an error case.
        error: function(response, ioArgs) { // ?
          console.error("HTTP status code: ", ioArgs.xhr.status); // ?
          return response; // ?
          }
        });
      }
  </script>
 </head>
 <body class=tundra>
   <button dojoType="dijit.form.Button" type="button" onClick="changeContenu('datetextbox.htm');">Display DateTextBox</button>
   <div id="contenu" style="font-size: big"></div>
 </body>

datetextbox.htm

<input dojoType="dijit.form.DateTextBox" type="text" name="datesaisie" id="datesaisie" value="" required="true" />

Is someone can explain to me where i'm wrong ?

I've tried something like

I've tried something like this but i have the same problem ...

test2.htm

<head>
  <title>Hello, Ajax world!</title>
  <style type="text/css">
        @import "js/dojo1.1.1/dijit/themes/tundra/tundra.css";
        @import "js/dojo1.1.1/dojo/resources/dojo.css";
  </style>
  <script type="text/javascript" src="js/dojo1.1.1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
  <script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dijit.form.DateTextBox");
  dojo.require("dijit.layout.ContentPane");
  </script>
  <script type="text/javascript">
    function changeContenu(newHref) { // ?
                dijit.byId("contenu").setHref(newHref);
      }
  </script>
 </head>
 <body class=tundra>
   <button dojoType="dijit.form.Button" type="button" onClick="changeContenu('datetextbox.htm');">Display DateTextBox</button>
   <input dojoType="dijit.form.DateTextBox" type="text" name="datesaisie" id="datesaisie" value="" required="true" />
   <div dojoType="dijit.layout.ContentPane" id="contenu" href=""></div>
 </body>

you need to parse.

Looks like all (the orig poster) needs to do is parse the callback content:

...
load: function(data,ioArgs){
    var n = dojo.byId("contenu");
    n.innerHTML = data;
    dojo.parser.parse(n);
},
...

just be careful about parsing a node that _already_ has widgets in it, you'll get duplication errors, or other foo happenings. Hope this Helps.

Peter Higgins
SitePen, Inc.

Thank you very much, it's

Thank you very much, it's works.
It just take a few time for me to find that I have to declare dojo.require("dojo.parser");

Thanks.
Bye.

PS : It works as well for the second case.

You should checkout the

You should checkout the SitePen QuickStart Guide. It covers a lot of "getting going" stumbling blocks like that, and gives lots of examples:

http://sitepen.com/labs/guides/?guide=DojoQuickStart