Dojo Grid reload data file upon button click - json

Question

I know there maybe similar questions out there, but I still cannot find the answer. Much appropriate anyone who can help me.
There are 5 departments, and each department has 4 products. So I created 5 buttons and 4 tabs, each tab contains a grid. By default the department A is loaded, user can switch tabs to see different products information from this department. By click another button B, department B's information will loaded to all 4 tabs.
Click each button will send a ajax request to the back end PHP code, PHP will read XML file do calculation and write data to "data\productA.json", "data\productB.json" , "data\productC.json" , "data\productD.json" files, respect to product A to product D for that specific department. Note that the first tab always read from "data\product A" file, no matter which button you clicked, same for other tabs.
Then the JavaScript will read from the "data\product?.json" file and present data in the grid.
When the page loads, first department's information is correctly loaded into the grid. However, if I change to another department (click button), the grid won't reload data from the json files.
Here is JS part:
dojo.addOnLoad(function() {
//init the first main column when load the page.
getDepartmentA();
var layout = [[
new dojox.grid.cells.RowIndex({ width: 5 }),
{name: 'Name', field: 'name'},
{name: 'Count', field: 'count'},
{name: 'Percent', field: 'percent'}
]];
var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout},
dojo.byId("grid1"));
grid.startup();
dojo.connect( dijit.byId("column3"),"onShow", dojo.partial( createGrid, "3") );
dojo.connect( dijit.byId("column4"),"onShow", dojo.partial( createGrid, "4") );
dojo.connect( dijit.byId("column5"),"onShow", dojo.partial( createGrid, "5") );
});
function getDepartmentA() {
dojo.xhrGet( {
url: "department_A_process.php",
handleAs: "json",
load: function(response) {
var tempgrid = grids[0];
var tempresponse = eval("("+response+")");
var tempstore = new dojo.data.ItemFileReadStore({url: "data/productA.json" }); //updated store!
var tempModel = new dojox.grid.data.DojoData(null, tempstore, {query:{productName:'*'}, clientSort: true});
tempgrid.setaModel(tempModel);
tempgrid.refresh();
console.dir(response); // Dump it to the console
}
});
}
function createGrid( id ) {
console.log("Calling createGrid function now!");
var layout = [[
new dojox.grid.cells.RowIndex({ width: 5 }),
{name: 'Name', field: 'name'},
{name: 'Count', field: 'count'},
{name: 'Percent', field: 'percent'}
]];
if (! grids[id] ) {
if (id =="1"){
var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
console.log( "I am in tab1");
} else if (id =="3"){
var store = new dojo.data.ItemFileReadStore( { url: "data/productB.json" } );
console.log( "I am in tab3");
} else if (id =="4"){
var store = new dojo.data.ItemFileReadStore( { url: "data/productC.json" } );
console.log( "I am in tab4");
} else if (id =="5"){
var store = new dojo.data.ItemFileReadStore( { url: "data/productD.json" } );
console.log( "I am in tab5");
}
var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout},
dojo.byId("grid" + id ));
grid.startup();
grids[id] = grid;
console.log( grid );
}
}
My index page is like:
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false">
<div id="column1" dojoType="dijit.layout.ContentPane" title="Label by Brand" selected="true">
<h1>Label by Brand</h1>
<div class="partsContainer">
<div id="grid1" class="gridContainer">
</div>
</div>
</div>
<div id="column3" dojoType="dijit.layout.ContentPane" title="Session Types">
<h1>Session Types</h1>
<div class="partsContainer">
<div id="grid3" class="gridContainer">
</div>
</div>
</div>
<div id="column4" dojoType="dijit.layout.ContentPane" title="Labels by Session">
<h1>Labels by Session</h1>
<div class="partsContainer">
<div id="grid4" class="gridContainer">
</div>
</div>
</div>
<div id="column5" dojoType="dijit.layout.ContentPane" title="Monthly Report">
<h1>Monthly Report</h1>
<div class="partsContainer">
<div id="grid5" class="gridContainer">
</div>
</div>
</div>
</div>
The JSON file looks like:
{
identifier: "productName",
label: "productName",
items: [
{ "productName" : "p1", "count" : 3362, "percent" : "32.8" },
{ "productName" : "p2", "count" : 421, "percent" : "4.1" },
{ "productName" : "p3", "count" : 526, "percent" : "5.1" },
{ "productName" : "p4", "count" : 1369, "percent" : "13.4" },
...
{ "productName" : "Total", "count" : 10242, "percent" : "100" }
]
}
Anyone can help out, how to reload the file that generated by PHP to the grid? Thank you.

Answer 1

I don't see any code involving a button or requesting new data for a store in your code...
To fix your issue, try adding clearOnClose:true to your store initializations. You may also need urlPreventCache:true. Firebug or any sort of net monitor will tell you if this is needed.
When the button is pressed, get the reference to the store for each grid and call store.close() then store.fetch(). This should accomplish what you are looking for by refreshing the data in the store. After this it may be necessary to call grid.render() or something similar.
One thing I should note here just to save you a possible headache later: Unless you have some sort of user hash for the directory structure and security measures in place, the way your PHP behaves by creating a single set of files for each department is likely going to result in problems with multi-user support and security issues where you can read another person's JSON responses.
Found the info here : http://livedocs.dojotoolkit.org/dojo/data/ItemFileReadStore. Search for clearOnClose for the approximate area to look for information.