Refresh Grid

So i have a function on my main page that builds the grid, and a hyperlink that rebuild the xml file, then creates the table, however, i have to close my browser to get the new data, even though the new data was written to the xml file.

Ok here is a little more explination on what i am trying to do.

O i have a function that takes 1 paramter, this is used in what xml file to get.

so

function creategrid(my_xml_file_prefix)
{
do grid stuff
}

so how do i refresh my grid?

Ive seen this below, but i cant run that since i dont know where to put that code, or what i pass it etc.

function clearGrid(){
obj.clearCellModel();
obj.clearRowModel();
obj.clearScrollModel();
obj.clearSelectionModel();
obj.clearSortModel();
obj.refresh();
}

function creategrid(my_xml_file_prefix)
{
clearGrid();
do grid stuff
}

that dosent work...

where do i put this in my code?
i cant pu that in my create grid function, i cant put it outside, since its not binded to the grid object

function clearGrid(){
obj.clearCellModel();
obj.clearRowModel();
obj.clearScrollModel();
obj.clearSelectionModel();
obj.clearSortModel();
obj.refresh();
}

anyone?

anyone?

i already tried that adding a ?time on the end, dosent work.

anyone?

anyone?

anyone?

Hi joe,
Not sure if it could help, but what I would try is .. after hyperlink (xml rebuild) do a complete grid-initialization, something like:

obj.clearCellModel();
obj.clearRowModel();
obj.clearScrollModel();
obj.clearSelectionModel();
obj.clearSortModel();
table.request();
obj.setCellModel(table);
obj.setRowCount(table.getCount());
obj.refresh();

HTH

i tried that didnt work

Check this one also:
http://www.activewidgets.com/javascript.forum.23968.7/refreshing-grid-after-xpath-filtering.html

just replace :
myGrid.refresh();
with this:
myGrid.getRowsTemplate().refresh();

Not sure if it only works on xpah xml's and table.setXML(wholeXML) , but worth to try, also as mentioned in the above post check that your new xml data is valid.
HTH

where do i put that...

this is my main function to create a grid, where do i put that code in so when i run this code again, it gets the latest xml file i just created?

function createxmlgridofteacherhomefolder(teacherid)
{
document.getElementById('Roster_Details_File_Distribution').innerHTML = "";

var table = new AW.XML.Table;
var d = new Date();
table.setURL("/data/"+teacherid+"_homefiles.xml?"+d.getTime());
table.request();

var columns = ["FileName"];
var obj = new AW.UI.Grid;

obj.setId("myGrid5");
obj.setColumnCount(1);
obj.setHeaderText(columns);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
obj.setSelectionMode("multi-row");

obj.onSelectedRowsChanged = function(rowIndicesArray){
document.getElementById('hidden_selected_rows_teacher_portal_files').value = "" // Clear Current Value
for (i=0;i<rowIndicesArray.length;i++) {
// alert(obj.getCellValue(0,rowIndicesArray[i]))
var oldvalue = document.getElementById('hidden_selected_rows_teacher_portal_files').value;
document.getElementById('hidden_selected_rows_teacher_portal_files').value = oldvalue + "3$3" + obj.getCellValue(0,rowIndicesArray[i]);
}
}

var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str]);
obj.setCellModel(table);

// write grid html to the page
document.getElementById('Roster_Details_File_Distribution').innerHTML = "<input type=hidden id=hidden_selected_rows_teacher_portal_files>" + obj;
}

anyone?

Try this one,
just need to call your function with a second parameter (firstTime)
[ true in the initial page-load (last line of code)]
and false when your link recreates the xml file..
Maybe you need some more delay (timeout) while recording the file at server side 2000= 2 seconds , so adjust it to your needs.
window.setTimeout(function()
createxmlgridofteacherhomefolder("2", false);
},2000);
Hope it makes more sense now.

function createxmlgridofteacherhomefolder(teacherid, firstTime)
{
//document.getElementById('Roster_Details_File_Distribution').innerHTML = "";

var table = new AW.XML.Table;
var d = new Date();
//table.setURL("/data/"+teacherid+"_homefiles.xml?"+d.getTime());
//table.request();

var columns = ["FileName"];
var obj = new AW.UI.Grid;

obj.setId("myGrid5");

obj.onSelectedRowsChanged = function(rowIndicesArray){
document.getElementById('hidden_selected_rows_teacher_portal_files').value = "" // Clear Current Value
for (i=0;i<rowIndicesArray.length;i++) {
// alert(obj.getCellValue(0,rowIndicesArray[i]))
var oldvalue = document.getElementById('hidden_selected_rows_teacher_portal_files').value;
document.getElementById('hidden_selected_rows_teacher_portal_files').value = oldvalue + "3$3" + obj.getCellValue(0,rowIndicesArray[i]);
}
}

var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str]);
obj.setCellModel(table);

obj.clearCellModel();
obj.clearRowModel();
obj.clearScrollModel();
obj.clearSelectionModel();
obj.clearSortModel();

table.setURL("basic" + teacherid + ".xml" + "?" + d.getTime());
table.request();

obj.setHeaderText(columns);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
obj.setSelectionMode("multi-row");
obj.setCellModel(table);
obj.setColumnCount(1);
obj.setRowCount(table.getCount());
obj.refresh();

if(firstTime== true){
document.getElementById('Roster_Details_File_Distribution').innerHTML = "<input type=hidden id=hidden_selected_rows_teacher_portal_files>" + obj ;
}
}

createxmlgridofteacherhomefolder("1", true);

not sure what your doing

Or try this one (much simpler) based on a single argument, that if passed empty then an empty grid will be painted.( without url xml error)
createxmlgridofteacherhomefolder("")
Note: no more need of cealr...Models , because every time you call this function a new table and grid are created.
HTH

function createxmlgridofteacherhomefolder(teacherid){

var obj = new AW.UI.Grid;
obj.setId("myGrid5");
obj.setHeaderText(columns);
obj.setColumnCount(1);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
obj.setSelectionMode("multi-row");
obj.setRowCount(0);

if(teacherid != ""){
var columns = ["FileName"];
var table = new AW.XML.Table;
var d = new Date();

table.setURL("basic" + teacherid + ".xml" + "?" + d.getTime());
table.request();
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
obj.setCellFormat([str]);
obj.setCellModel(table);

obj.setRowCount(table.getCount());
obj.refresh();
}

obj.onSelectedRowsChanged = function(rowIndicesArray){
document.getElementById('hidden_selected_rows_teacher_portal_files').value = "" // Clear Current Value
for (i=0;i<rowIndicesArray.length;i++) {
// alert(obj.getCellValue(0,rowIndicesArray[i]))
var oldvalue = document.getElementById('hidden_selected_rows_teacher_portal_files').value;
document.getElementById('hidden_selected_rows_teacher_portal_files').value =
oldvalue + "3$3" + obj.getCellValue(0,rowIndicesArray[i]);
}
}

var aaa = document.getElementById('Roster_Details_File_Distribution').innerHTML;
if(aaa==""){
document.getElementById('Roster_Details_File_Distribution').innerHTML =
"<input type=hidden id=hidden_selected_rows_teacher_portal_files>" + obj ;
}
}

anyone still have a solution for this?

Ive tried them all, adding a random value to end of URL, doing all that clear crap, and nothing seems to work anyone?

joe,
I'm posting the complete sample I used for testing this, which is almost the same of my last post.
(just need two files placed on same folder as page 'basic1.xml' and 'basic2.xml')

Perhaps is just a timing issue at your server, so, try some timeout before table.request() and after obj.setRowCount(table.getCount());

Note: I put a button to check it instead of a link, but shouldn't be any difference.
The only thing I corrected is placing the table and grid creation outside the function ( could be so?)
HTH

<body>

<div type=hidden id=Roster_Details_File_Distribution style="width:600px; height:600px"></div>

<script>
var button = new AW.UI.Button;
button.setControlText('load next xml file')
button.setId('a01');

button.onControlClicked = function(){
/// HERE YOU DO THE XML FILE REPLACE AT THE SERVER (link)
createxmlgridofteacherhomefolder("2", false);
alert(oldvalue)

var table = new AW.XML.Table;
var d = new Date();

var columns = ["FileName"];
var obj = new AW.UI.Grid;
obj.setId("myGrid5");

function createxmlgridofteacherhomefolder(teacherid, firstTime)
{
table.setURL("basic" + teacherid + ".xml" + "?" + d.getTime());

obj.setColumnCount(1);
obj.setRowCount(table.getCount());
obj.setHeaderText(columns);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
obj.setSelectionMode("multi-row");

obj.onSelectedRowsChanged = function(rowIndicesArray){
document.getElementById('hidden_selected_rows_teacher_portal_files').value = "" // Clear Current Value
for (i=0;i<rowIndicesArray.length;i++) {
var oldvalue = document.getElementById('hidden_selected_rows_teacher_portal_files').value;
document.getElementById('hidden_selected_rows_teacher_portal_files').value =
oldvalue + "3$3" + obj.getCellValue(0,rowIndicesArray[i]);
}
}

table.setURL("basic" + teacherid + ".xml" + "?" + d.getTime());
table.request();
var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str]);
obj.setCellModel(table);

obj.setRowCount(table.getCount());
obj.refresh();

var aaa = document.getElementById('Roster_Details_File_Distribution').innerHTML ;
if(aaa==""){
document.getElementById('Roster_Details_File_Distribution').innerHTML =
"<input id=hidden_selected_rows_teacher_portal_files>" + obj + button;
// NOTE REMOVED IN PREVIOUS LINE type=hidden AND ADDED + button FOR TESTING PP
}
}

createxmlgridofteacherhomefolder("1", true);

</script>
</body>
</html>

Or...
could it be an issue of special chararcters in query string?

oldvalue + "3$3" + obj.getCellValue(0,rowIndicesArray[i]);

http://www.javapractices.com/topic/TopicAction.do?Id=96

Where do i put my wait?
Do i do a javascript wait?

I have this setup like this

build_graph()
{
}

create_xml_file()
{
//Do work
Then I call build_graph() after i built the xml file.
}

I am recreating the xml file again, i am not hooking to another xml file.
so your example is not like mine..

I first load the xml file i built, then i have it if they make a change, it will rebuild the xml file, and then redisplay the updated graph. i see that the xml file has updated, but the graph is the same as the old one.

Well I created it this way to simulate a change in rows and/or columns, but it really doesn't matter if is another file.
(i.e. if change to "1" the code below, you can load the page in the browser , then alter the xml file ,and finally [ in browser] select a row- push the button) this should have same effect as your server code.
-check that you can see the altered data.

Note: there is a missing '}' in my last post sample.

button.onControlClicked = function(){
/// HERE YOU DO THE XML FILE REPLACE AT THE SERVER (link)
createxmlgridofteacherhomefolder("2", false); //change to "1" for above sample
//alert(oldvalue)
} //MISSING
var table = new AW.XML.Table;
var d = new........

I would put a timeout delay here:

obj.setCellFormat([str]);
window.setTimeout(function(){ //START TIMEOUT
obj.setCellModel(table);
obj.setRowCount(table.getCount());
obj.refresh();
},3000);// END 3 SCONDS TIMEOUT
//.....
Sorry no other idea of what could be, but check also :
-disable broser/server cache
-utf-8 encoding

Hope ths helps