AJAX Style processing icon

[shankwheat]

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";
<span id="lblResults " name="lblResult s"></span>

[Jason]

On Apr 13, 1:28 pm, "shankwheat " <evanbu...@gmai l.comwrote:

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

<span id="lblResults " name="lblResult s"></span>

Can you post the code where you are opening and sending the
XmlHTTPRequest?

[shankwheat]

On Apr 13, 1:46 pm, "Jason" <redund...@gmai l.comwrote:

On Apr 13, 1:28 pm, "shankwheat " <evanbu...@gmai l.comwrote:

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

<span id="lblResults " name="lblResult s"></span>

Can you post the code where you are opening and sending the
XmlHTTPRequest?- Hide quoted text -

- Show quoted text -

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return
}
var url="getIndustr ies.aspx"
xmlHttp.onready statechange=sta teChanged
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)
}

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

// Clear the available listbox of any previous options
document.choice Form.available. length = 0;

// Split the delimited response into an array
results = xmlHttp.respons eText.split("," );

for (var i=0; i < results.length; ++i){
addOption(docum ent.choiceForm. available, results[i], results[i]);
}
}
}

function addOption(selec tbox,text,value )
{
var optn = document.create Element("OPTION ");
optn.text = text;
optn.value = value;
selectbox.optio ns.add(optn);
}

[Jason]

On Apr 13, 2:18 pm, "shankwheat " <evanbu...@gmai l.comwrote:

On Apr 13, 1:46 pm, "Jason" <redund...@gmai l.comwrote:

On Apr 13, 1:28 pm, "shankwheat " <evanbu...@gmai l.comwrote:

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

<span id="lblResults " name="lblResult s"></span>

Can you post the code where you are opening and sending the
XmlHTTPRequest?- Hide quoted text -

- Show quoted text -

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return

}

var url="getIndustr ies.aspx"
xmlHttp.onready statechange=sta teChanged
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)

}

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

// Clear the available listbox of any previous options
document.choice Form.available. length = 0;

// Split the delimited response into an array
results = xmlHttp.respons eText.split("," );

for (var i=0; i < results.length; ++i){
addOption(docum ent.choiceForm. available, results[i], results[i]);

}
}
}

function addOption(selec tbox,text,value )
{
var optn = document.create Element("OPTION ");
optn.text = text;
optn.value = value;
selectbox.optio ns.add(optn);

}

Just an observation, why don't you set the innerHTML of lblResults
right after you send the request and then just check for readyState ==
4.

var url="getIndustr ies.aspx"
xmlHttp.onready statechange=sta teChanged
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}

function stateChanged()
{
if(xmlHttp.read yState == 4) {
//do stuff
}
}

It will make less work for the browser.

[shankwheat]

On Apr 13, 2:30 pm, "Jason" <redund...@gmai l.comwrote:

On Apr 13, 2:18 pm, "shankwheat " <evanbu...@gmai l.comwrote:

On Apr 13, 1:46 pm, "Jason" <redund...@gmai l.comwrote:

On Apr 13, 1:28 pm, "shankwheat " <evanbu...@gmai l.comwrote:

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

<span id="lblResults " name="lblResult s"></span>

Can you post the code where you are opening and sending the
XmlHTTPRequest?- Hide quoted text -

- Show quoted text -

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return

}

var url="getIndustr ies.aspx"
xmlHttp.onready statechange=sta teChanged
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)

}

function stateChanged()
{
if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loaded
}
else if(xmlHttp.read yState == 2)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //interactive
}
else if(xmlHttp.read yState == 3)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>";
}
else if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById("lblRe sults").innerHT ML = "";

// Clear the available listbox of any previous options
document.choice Form.available. length = 0;

// Split the delimited response into an array
results = xmlHttp.respons eText.split("," );

for (var i=0; i < results.length; ++i){
addOption(docum ent.choiceForm. available, results[i], results[i]);

}
}
}

function addOption(selec tbox,text,value )
{
var optn = document.create Element("OPTION ");
optn.text = text;
optn.value = value;
selectbox.optio ns.add(optn);

}

Just an observation, why don't you set the innerHTML of lblResults
right after you send the request and then just check for readyState ==
4.

var url="getIndustr ies.aspx"
xmlHttp.onready statechange=sta teChanged
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading

}

function stateChanged()
{
if(xmlHttp.read yState == 4) {
//do stuff
}

}

It will make less work for the browser.- Hide quoted text -

- Show quoted text -

Yes, that makes sense. I implemented your suggestion and it does
load a litle faster but didn't solve the problem with the icon not
appearing. I'm passing quite a bit of data back to the page and it
just freezes until it's done which is all the more reason I need some
cue to the user of what's going on :-)

Thanks

[-Lost]

"shankwheat " <ev*******@gmai l.comwrote in message
news:11******** **************@ p77g2000hsh.goo glegroups.com.. .

I'm experimenting with using a AJAX style "processing " icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

This has *NOTHING* to do with all the code you have posted. In fact, every single reply
to this thread (aside from mine) is pointless.

At the moment you being your request, make your IMG or DIV, or whatever appear.

When the request returns (as in, is loaded) then make the image disappear. End of story.

-Lost

[evanburen]

On Apr 13, 11:42 pm, "-Lost" <[e-mail] twrote:

"shankwheat " <evanbu...@gmai l.comwrote in message

news:11******** **************@ p77g2000hsh.goo glegroups.com.. .

I'm experimenting with using aAJAXstyle"proc essing"icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of myprocessingico n
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind oficon?
What can I do so this works right? Thanks

This has *NOTHING* to do with all the code you have posted. In fact, every single reply
to this thread (aside from mine) is pointless.

At the moment you being your request, make your IMG or DIV, or whatever appear.

When the request returns (as in, is loaded) then make the image disappear. End of story.

-Lost

Yea, well, -"Lost", it doesn't work. Thanks for the pointless
suggestion.

[-Lost]

"ev*******@gmai l.com" <ki*********@gm ail.comwrote in message
news:11******** **************@ y5g2000hsa.goog legroups.com...

On Apr 13, 11:42 pm, "-Lost" <[e-mail] twrote:

>"shankwheat " <evanbu...@gmai l.comwrote in message

news:11******* *************** @p77g2000hsh.go oglegroups.com. ..

I'm experimenting with using aAJAXstyle"proc essing"icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of myprocessingico n
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind oficon?
What can I do so this works right? Thanks

This has *NOTHING* to do with all the code you have posted. In fact, every single
reply
to this thread (aside from mine) is pointless.

At the moment you being your request, make your IMG or DIV, or whatever appear.

When the request returns (as in, is loaded) then make the image disappear. End of
story.

Yea, well, -"Lost", it doesn't work. Thanks for the pointless
suggestion.

Just because *you* are incapable of getting it to work does not mean it is impossible.

Thanks for your pointless reply though.

By the way, I have a perfectly working example (in fact, a couple). So, again, *YOU* are
doing something wrong.

I am sorry to hear that you take such offense to valid suggestions though. Next time I'll
just ignore you.

-Lost

[VK]

On Apr 13, 10:18 pm, "shankwheat " <evanbu...@gmai l.comwrote:

if (xmlHttp.readyS tate == 0)
{
document.getEle mentById("lblRe sults").innerHT ML = "<img
src='mozilla_bl u.gif' alt='loading..p lease wait'>"; //loading
}
else if(xmlHttp.read yState == 1)

<snip>

In your coding your are assuming that the state changes are going by
the book, "slow and proudly": 0-1-2-3-4

That is hardly ever true for ajaxoids. First of all 0 state is never
to expect: if you could instantiate your ajaxoid then its state is
already 1; if you couldn't then you would get a failure return on the
previous step. The stages 1-2-3 overall a complete bogus, they were
inherited from the original IXMLHTPRequest interface but they serve no
practical purpose.
First of all they are passing so quickly that no DOM interface will
bother to show them (internal delay is too short).
Secondly they rarely go in the numeral order 1-2-3. The most often one
or two of them simply disregarded so never fired.
Thirdly the intermediary states' change is screwed on Gecko. Don't
have bug # right now, so either trust me or don't.
-------------

0-1-2-3 states is a useless "Cargo Cult" add-on remained from the AJAX
early childhood - producers still keeping it because it's documented.
In the programming the only two stages you are dealing with are:
1) success / failure to instantiate your ajaxoid
2) success / failure to arrive to the state 4 (complete)

There is a number of pitfalls on the go. The first one is the graphics
context update delay, see
http://groups.google.com/group/comp....470812c5e4d3b5

Another one is that Gecko reports state 4 in case of network error as
well, but in this case any attempt to access ajaxoid properties leads
to run-time error. By "network error" I don't mean "Server not
responding" and so, but lower level protocol errors.

Overall while the principles of ajaxoid programming are very simple,
the amount of details to take into account is usually exceeding the
provided programmer's knowledge and experience. This is why I
regularly suggest to not take the risk of re-inventing the wheel but
take a time proved library like http://www.ajaxtoolbox.com

[-Lost]

"VK" <sc**********@y ahoo.comwrote in message
news:11******** **************@ o5g2000hsb.goog legroups.com...

Overall while the principles of ajaxoid programming are very simple,
the amount of details to take into account is usually exceeding the
provided programmer's knowledge and experience. This is why I
regularly suggest to not take the risk of re-inventing the wheel but
take a time proved library like http://www.ajaxtoolbox.com

So JavaScripters should just rely on an existing library instead of learning the proper
way in which to do something?

-Lost