dojox.layout.ContentPane

Question

The followig code is inside a tag script in the head of a JSP. I wanted to emulate this behaviour http://dante.dojotoolkit.org/static/xd/stack-accordion.html. The main differences from that sample are:

1) I use e Tree to navigate contents in the StackContainer;

2) Content are handled by dojoX.Layout.ContenPane beacuse I want to load some JSP I wrote previously.

dojo.addOnLoad(function(){

var store = new dojo.data.ItemFileReadStore({
    data:{
     identifier: 'id',
     label: 'name',
     items: [
            { id: '01', name:'Metadata', type:'Area',
             children:[
                        {_reference:'001'},
                        {_reference:'002'}
                        ]
            },
            { id: '001', name:'Insert', type:'action', content:'content1' },
            { id: '002', name:'Delete', type:'action', content:'content2' },
     { id: '02', name:'Class', type:'Area',
             children:[
                        {_reference:'003'}
                        ]
            },
     { id: '003', name:'Create', type:'action', content:'content3'}
            ]
        }
});

var treeModel = new dijit.tree.ForestStoreModel({
    store: store,
    query: {"type": "Area"},
    rootId: "root",
    childrenAttrs: ["children"],
    openOnClick: true
});

var ciccio = new dijit.Tree({
    model: treeModel,
    showRoot: false
}, "treeOne");

// make the main container:
var bc = new dijit.layout.BorderContainer({
    style:"width:1152px; height:600px"
}, "main");

// add the two regions:
var accordion = new dijit.layout.AccordionContainer({
    region:"left",
    id:"mainAccordion",
    style:"width:150px"
}, "accordion").placeAt(bc);

var stack = new dijit.layout.StackContainer({
    region:"center"
}, "stack").placeAt(bc);

var accordion1 = new dijit.layout.AccordionPane({
    title: "ciao",
    content: ciccio
}).placeAt(accordion);

[...]

var content3 = new dojox.layout.ContentPane({
    id: "content3",
    adjustPaths:true,
    renderStyles:true,
    executeScripts:true,
    href:"./content3.jsp"
}).placeAt(stack);

dojo.connect(ciccio, "onClick", function(item){
    if(store.getValue(item, "type")!= 'Area')
    {
     var boh = store.getValue(item, "content");
     var prova = dijit.byId(boh);
     stack.selectChild(prova);
    }
    else{
     alert(store.getLabel(item));
    }
});

 bc.startup(); /*end dojo.AddOnLoad*/)};

Ande here is the full code of the imported JSP (content3.jsp)

<script type="text/javascript" src="./js/filebox/content3.js"></script>
<div dojoType="dijit.layout.BorderContainer" id="container3"
 style="width:auto; height:750px; border: 1px solid #9f9f9f;">

<div dojoType="dijit.layout.ContentPane" region="top">
 <h2>Ciao!</h2>
 <table>
  <tr>
   <td><label for="filterBox"> Filter: </label></td>
   <td><div dojoType="dijit.form.TextBox"
     jsId="filterBox"
     id="filterBox"/>
    </div>
   </td>
  </tr>
 </table>
</div>

<div dojoType="dijit.layout.ContentPane" region="center">
 <table dojoType="dojox.grid.DataGrid"
   structure= "content3GridLayout"
      columnReordering="true"
      noDataMessage="No metadata retrieved"
      errorMessage="Invalid data retrieved format"
      jsId="content3Grid"
      id="content3Grid"
      style="width:auto; height:99%;">
 </table>
</div>

As you can see at the top of this JSP I import a file JS Here is it:

var content3GridLayout =
 [
    {name : "ID", field : "idMetadataClass", width : "10%"},
    {name : "Name", field : "className", width : "30%"},
    {name : "Description", field : "description", width : "60%"}     
 ];

dojo.xhrPost({
url : "./jsonListGenerator",
content: {action:"classList"},
handleAs : "json",
load : function(responseObject) {
 var content3GridStore = new dojo.data.ItemFileReadStore({data:responseObject});
 content3Grid.setStore(content3GridStore);

 return responseObject;
},
error : function(responseObject) {
 dojoAlert("Filebox admin","Internal server error");
 return responseObject;
}
});

var lastSearchValue = "";
dojo.connect(dijit.byId(filterBox), "onKeyUp", function(el) {
if (el.explicitOriginalTarget.value!=lastSearchValue) {
 lastSearchValue = el.explicitOriginalTarget.value;
 var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
 eval(my_filter);
 content3Grid.setQuery(strToFilter,{ignoreCase:true});
}
});

Everythings works perfectly except DOJO.CONNECT Infact firebugs warns that filterBox is undefined when dojo.connect tries to connet to de TextBox declared Markup way.

This problem doesn't show if:

1) the TextBox is declared programmaticaly in the JS file

var filterBox = new dijit.form.Textbox({...});

2) the javascript code belonging to the filterBox is placed next the dojotype tag

<div dojoType="dijit.form.TextBox"
     jsId="filterBox"
     id="filterBox"/>
     <script type="dojo/method" event="onKeyUp">
     if (el.explicitOriginalTarget.value!=lastSearchValue) {
      lastSearchValue = el.explicitOriginalTarget.value;
      var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
      eval(my_filter);
      content3Grid.setQuery(strToFilter,{ignoreCase:true});
     }
     </script>
    </div>

Do you know the reason why it happens? Is it a problem of scope?

Thank you in advance!

Teresa

Answer 1

You should wrap your code in content3.js in a dojo.addOnLoad() call, much like you had in the JSP file in (2). You typically won't want to run any Dojo code until Dojo's 'onload' event fires. There are no guarantees that the code loaded by dojo.require will be available to you, as is the case with the cross-domain (xd) loader. The parser itself doesn't run until the document is finished loading, so Javascript executed immediately will not be able to find the widget.

Answer 2

The parser itself doesn't run until the document is finished loading, so Javascript executed immediately will not be able to find the widget

this is the problem. But even if I wrap the code in dojo.addOnLoad() it seams that the parsing of the content3.JSP is made after the evaluation of the script in content3.JS

Darn...

Anyway thank you for you answare, it helped me to understand the problem.