Jquery and Dojo DataGrid problem

Question

I've a problem when I want to load a page that contains some dojo code. The page loaded doesn't display any information.

My index.html that loads the page, looks like that :

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
//to fill
</script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    </head>
    <body>
    <div id="mainFrame">
<script type="text/javascript" >
$('#mainFrame').load('/Page.html');
</script>
</div>
    </body>
    <html>

My second page contains the code to display a DataGrid : Pahe.html

<html>
    <head>
    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css'/>
       <script type="text/javascript" >
       dojo.require("dojox.grid.DataGrid");
       dojo.require("dojo.data.ItemFileReadStore");
       function prepare() {
          var data0 =[{FristName:'jean',LastName:'edu',Course:'english'}];
          var store0 = new dojo.data.ItemFileReadStore({
          data: {
          items: data0
          }
          });
          var grid0  = new dojox.grid.DataGrid({
          store: store0,
          structure: [
          {field: 'FirstName', name: 'FirstName', width:'auto'},
          {field: 'LastName', name: 'LastName', width:'auto'},
          {field: 'Course', name: 'Course', width:'auto'}
          ],
          rowsPerPage: 20,
          clientSort : true,
          rowSelector : '10px'
          }, "grid0");
          grid0.startup();
       }
       dojo.addOnLoad(prepare);
    </script>
    </head>
    <body>
    <div id="grid0"/>
    </body>
    </html>

When I run this code in a browser, I see nohting. However, I see with google chrome prospect tool that the browser loads the dataGrid of dojo...

I think it's a problem with the load of jquery because If I add the code to load the script of dojo in the 'Page.html', i'm able to see something...I guest that something is wrong with jquery and dojo...

Could you help me to solve that?

Thanks in advance,

bat

JasonStoltz JasonStoltz · Accepted Answer · 2011-05-06T11:32:15

Just thinking out loud here maybe, but you are calling $('#mainFrame') inline in the document above the corresponding "mainframe" div. Will that work? I would think that js call needs to be beneath the "mainframe" div in the document.

I would try moving that call out of the "head" and put it inline in the body somewhere after the "mainframe" div.

Jquery and Dojo DataGrid problem

3 Answers