the grid appears properly on template's first loading. But when you click the paging button to load flooders.php thru list_result1() only the paging buttons will appear. I already tested the flooders.php outside the template and it works properly.

what seems to be the problem? and what are the tools that i can use to see if the javascript is loading properly because i think the error console of ff browser which i use to track errors won't give you that much info when you are working with contentpane.

thanks! ice

note: below are the codes...

** from contentpane js


function list_result1(){
 args="";
 uri = "flooders.php" + args;
   dojo.xhrGet( {

        url: uri,
        handleAs: "text",
        timeout: 500, // Time in milliseconds
           load: function(response, ioArgs) { //alert(response);
    dojo.byId("flooders_table").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;
      }
    }); //end of dojo.xhrGet


}

**flooders.php starts here***


  @import "js/dojo-0.9.0/dojo/resources/dojo.css";
  @import "js/dojo-0.9.0/dijit/themes/tundra/tundra.css";
  @import "js/dojo-0.9.0/dijit/themes/tundra/tundra_rtl.css";
  @import "css/ash.css";
         @import "js/dojo-0.9.0/dojox/grid/resources/Grid.css";
  @import "js/dojo-0.9.0/dojox/grid/resources/tundraGrid.css";
  @import "js/dojo-0.9.0/dojo/resources/dojo.css";
  @import "js/dojo-0.9.0/dijit/tests/css/dijitTests.css";
                       .dojoxGridRowEditing td {
    background-color: #F4FFF4;
   }
   .dojoxGrid input, .dojoxGrid select, .dojoxGrid textarea {
    margin: 0;
    padding: 0;
    border-style: none;
    width: 100%;
    font-size: 100%;
    font-family: inherit;
   }
   .dojoxGrid input { }
   .dojoxGrid select { }
   .dojoxGrid textarea { }

#controls {
    padding: 0px 0;
   }
   #controls button {
    margin-left: 10px;
   }
   .myGrid {
    width: 550px;
    height: 230px;
    margin-left: 20px;
    /* border: 1px solid silver; */
   }
  

 

echo " // it has script heading here
    (function(){
     // some sample data
     // global var 'data'
     data = {
      identifier: 'id',
      label: 'id',
      items: []
     };
     data_list = [ 
      $banlist
     ];
     var rows = $listnum ;
     var x=1;
     for(var i=0, l=data_list.length; i

 // global var 'test_store'
 test_store = new dojo.data.ItemFileWriteStore({data: data});
})();


// it has ending here

"; ?>

    
      
                  
       





-->

here's the javascript

dojo.require("dijit.TitlePane");
  dojo.require("dijit.dijit");
  dojo.require("dojox.grid.DataGrid");
  dojo.require("dojo.data.ItemFileWriteStore");
  dojo.require("dojo.parser"); // scan page for widgets and instantiate them
  dojo.require("dijit.layout.LayoutContainer");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.Editor");
  dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
  dojo.require("dijit._editor.plugins.LinkDialog");

//this must be inlcuded below function()

selectCell = {
    styles: 'text-align: center;',
    type: dojox.grid.cells.Select
   };

gridLayout = {
    defaultCell: { width: 5, styles: 'text-align: right;'  },
    rows: [
     [
      { name: 'Mark', width: 3, field: 'col1', editable: true, styles: 'text-align: center;', type: dojox.grid.cells.Bool },
      { name: 'Id', width: 3, field: 'id' , editable: false },
      { name: 'Username', field: 'col2', editable: false, styles: '', width: '70%' },
      { name: 'Reason', field: 'col3', editable: false , styles: '', width: '100%' },
      { name: 'Date Banned', field: 'col4', editable: false , styles: '', width: '70%'  }
     ]
    ]
   };