Remote Script and Progress Bar

[pwillia3]

All,
I have some remote scripts that queries a database. However there is no feedback to the user that anything is happening. So I created a progress bar that I want to update throughout the execution of the script. However all of my efforts to update (and the browser actually display) the progress bar have failed. It seems that the drawing messages/execution inside the browser are never being handled, therefore not updating my progressbar. Has anyone done this before. Here is my code

<code>
function MaterialType_OnChange() {
var RSTestResultSearch = RSGetASPObject("RSTestResultSearch.asp");
var mtId = new String();
var mustQuery = true;
var rows = new String();
var cols = new String();
var arrTemp = new Array();
var mtIdx, co, i;

//Start the progress bar
progressBar.SetPosition(0);

if(document.mainForm.materialType.value == -1) {
DisableSelect("vendor", "Step [2]");
DisplaySelCnt("vendor");

DisableSelect("pattern", "Step [3]");
DisplaySelCnt("pattern");
return;
}

progressBar.SetPosition(2);

//Enable/Disable selects
EnableSelect("vendor");
DisableSelect("pattern", (document.mainForm.patternAll.checked)?"All":"Step [3]");

//Get the selected material id
mtId = document.mainForm.materialType[document.mainForm.materialType.selectedIndex].value;


//Check if the query has already been done
for(i=0;i<arrMaterialType.length;i++) {
if(arrMaterialType.id == mtId) {
mtIdx = i;
if(arrMaterialType.arrVendor.length > 0) {
mustQuery = false;
break;
}
}
}

progressBar.SetPosition(4);

//Query vendors synchronously
if(mustQuery == true) {
co = RSTestResultSearch.getVendors(mtId);

//Check for remote script errors
if(CheckRSErrors(co) == false)
return;

rows = String(co.return_value).split("|");

for(i=0;i<rows.length;i++) {
cols = String(rows).split(",");
arrMaterialType[mtIdx].AddVendor(cols[0], cols[1]);
}
}

progressBar.SetPosition(6);

for(i=0;i<arrProductGroup.length;i++) {
if(arrProductGroup.mt_id == document.mainForm.materialType.value) {
arrTemp[arrTemp.length] = arrProductGroup;
}
}

progressBar.SetPosition(8);

WriteProductGroupTable(arrTemp);

progressBar.SetPosition(10);

FillVendorSelect(mtIdx);

DisplaySelCnt("vendor");

progressBar.SetPosition(0);
}
</code>

The SetPosition calls never update the progressbar. Help!!!

 

[vongrunt]

More explanation please - does progress bar move at all or it stops after remote scripting call (getVendors())?

Btw. check for RS.htm - it must be included client-side and be in a proper place (usually something/_ScriptLibrary).

 

[pwillia3]

The progress bar does not move at all. The screen is not updating when I change it.

As far as RS.htm, it has nothing to do with this problem. Also it must be on the server in the correct directory, not the client. I experienced with RS.

Patrick

 

[vongrunt]

OK - terminology glitch. Server-side include is vanilla SSI, client-side include is initiated from client-side code.

There are two progressBar.SetPosition() calls before RS.getVendors(). If I understand correctly how it works, progress bar should move with each call. Can you post other code - HTML form, arrMaterialType stuff and progressBar object?

 

[pwillia3]

Here is the code to create the progressbar:
<code>
function Body_OnLoad() {
var x = document.body.scrollLeft + 10;
var y = document.body.scrollTop + 10;

//Create the progresss bar
progressBar = new ProgressBar("progressBar", 10, 150, 0, 10, 1, 0, "#663399", "#ffffff");
progressBar.Show(x, y);

FillMaterialTypeSelect();
MaterialType_OnChange();
}

The progress bar is just a div :

<div id="progressBar"></div>

Here is the .js file with the progressbar code:

/*
*Class: ProgressBar
*
*************************/
function ProgressBar(id, height, width, minVal, maxVal, stepSize, position, fgColor, bgColor){
this.m_Height = height;
this.m_Width = width;
this.m_MinVal = minVal;
this.m_MaxVal = maxVal;
this.m_StepSize = stepSize;
this.m_Position = position;
this.m_FgColor = fgColor;
this.m_BgColor = bgColor;
this.m_Div = document.getElementById(id);
this.m_Interval = 0;

//Create the div
this.m_Div.id = "progressBar";
this.m_Div.style.display = "none";
this.m_Div.style.zIndex = "90";
this.m_Div.style.position = "absolute";
this.m_Div.style.left = "0px";
this.m_Div.style.top = "0px";
this.m_Div.style.border = "1px solid " + this.m_FgColor;
this.m_Div.align = "center";
this.m_Div.style.height = this.m_Height;
this.m_Div.style.width = this.m_Width;

//Create the table
this.CreateTable();
}

ProgressBar.prototype.CreateTable = function() {
var i, table, row, cell;

//Remove the table before recreating it
if(this.m_Div != null && this.m_Div.childNodes.length > 0)
this.m_Div.removeChild(this.m_Div.childNodes[0]);

//Create the table
table = document.createElement("table");
table.border = "0px";
table.cellPadding = "0px";
table.cellSpacing = "1px";
table.width = "100%";
table.height = "100%";
table.bgColor = this.m_BgColor;

this.m_Div.appendChild(table);

//Create the row
row = table.insertRow(table.rows.length);

//Create the cells
for(i=0;i<this.m_MaxVal;i++) {
cell = row.insertCell(row.cells.length);
cell.id = "progressBarC" + i;

if(i<=this.m_Position)
cell.style.backgroundColor = this.m_FgColor;
}
}

ProgressBar.prototype.SetMinVal = function(value) {
this.m_MinVal = value;
CreateTable();
}

ProgressBar.prototype.SetMaxVal = function(value) {
this.m_MaxVal = value;
CreateTable();
}

ProgressBar.prototype.SetPosition = function(value) {
var i, elem;

this.m_Position = value;

for(i=0;i<this.m_MaxVal;i++) {
elem = document.getElementById("progressBarC" + i);

if(i<this.m_Position)
elem.style.backgroundColor = this.m_FgColor;
else
elem.style.backgroundColor = this.m_BgColor;
}
}

ProgressBar.prototype.SetFgColor = function(value) {
var i, elem;

this.m_FgColor = value;
this.SetPosition(this.m_Position);
}

ProgressBar.prototype.SetBgColor = function(value) {
this.m_BgColor = value;
if(this.m_Div != null) {
this.m_Div.chidNodes[0].bgColor = this.m_BgColor;
}
}

ProgressBar.prototype.Show = function(x, y) {
this.m_Div.style.left = x;
this.m_Div.style.top = y;
this.m_Div.style.display = "block";
}

ProgressBar.prototype.StepIt = function() {
this.m_Position += this.m_StepSize;
this.SetPosition(this.m_Position);
}

ProgressBar.prototype.Hide = function() {
this.m_Div.style.display = "none";
}
</code>

 

[vongrunt]

Ack... IE exposes objects with defined ID as globals with the same name. Try this code:

<html>
<head>
	<title>Test</title>
	<script language="javascript" src="progressBar.js"></script>
</head>
<body onload="Body_OnLoad()">

<script language="javascript">
function Body_OnLoad() {
    var x = document.body.scrollLeft + 10;
    var y = document.body.scrollTop + 10;
    
    progressBar = new ProgressBar("blah", 10, 150, 0, 10, 1, 0, "#663399", "#ffffff");    
    progressBar.Show(x, y);
    
	 progressBar.SetPosition(8);    
}
</script>
<div id="blah" style="border: solid red 1px;"></div>

</body>
</html>

Then change "blah" into "progressBar" and name conflict happens (with your custom-made function/object).

 

[pwillia3]

There is no function/object name conflicts that I can see or are alerted to. What are you seeing? Does IE throw an error for you? My problem is that the screen is not updating when SetPosition is called from within MaterialType_OnChange.

 

[vongrunt]

In my example IE6 throws an error when I replace 2 occurences of "blah" with "progressBar" (which is btw. identical to your code). Error dissappears when I replace name back... and also after explicit variable declaration:

[b]var[/b] progressBar = new ProgressBar("progressBar", 10, 150, 0, 10, 1, 0, "#663399", "#ffffff");

Obviously we are chasing some ghosts and some puzzle pieces are still missing. Can you temporarily upload entire page on public URL?

 

[adam55]

The problem with your script is the way that IE deals with javascript. While javascript is executing, it won't redraw the screen. So, to get it to show the changes as you, you'll want to do something like this:

function stepOne()
{
//do stuff here

progressBar.SetPosition(1);

window.setTimeout("stepTwo()", 10);
}

function stepTwo()
{
//do stuff here

progressBar.SetPosition(2);

window.setTimeout("stepThree", 10);
}
//...

This will give the rendering engine 10 milliseconds to redraw the screen (and thus, the progress bar). You can mess around with the numbers if you want. (you may only need 1 millisecond, play around and see what happens)


Adam

 

[adam55]

PS. check out this article for more info:

http://msdn.microsoft.com/library/d...en-us/dndude/html/dude02262001.asp?frame=true