IE AJAX Issue..

N

Nico VanHaaster

Hello all,

I have run across an issue with IE 6.0+. I have a page that makes an
XMLHttpRequest to the webserver to update a report on the page. The
first time you hit the refresh report button the data is refreshed,
however if you try to refresh the report the onreadystatechage does
not seem to fire. I have tested this by placing an alert in the
verifyID2 & verifyID3 function to track where the XMLHttpRequest
currently is. Now when creating the Javascript i tend to lean towards
FireFox for obvious reasons. I have created similar Functions on other
pages that seem to work over multiple browsers so i am sort of
stumped.

Please let me know if you come up with anything. I have been looking
all over the place.

function verifyID(){
var ss = document.getElementById('reportspan')
ss.innerHTML = '';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please Wait
\">&nbsp;Preparing Reporting';
ss.style.cursor = 'wait';
setTimeout("verifyID2()",0);
}
function verifyID2(){
var ss = document.getElementById('reportspan')
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
ss.style.cursor = 'wait';
var url = 'get_unass_xml.php?location='+varLoc+'&sdate='+varSDate
+'&edate='+varEDate+'&ses='+ Math.random()
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
alert('Preparing Send'); //added to verify we are about to send
data
searchReq.onreadystatechange = verifyID3;
searchReq.open('GET', url, true);
searchReq.send(null);
}
}
function verifyID3(){
if(searchReq.readyState != 4){
alert(searchReq.readyState); //added to watch ready states <-
Second run never displays this message.
return false;
}
var ss = document.getElementById('reportspan')
var response = searchReq.responseText.split(":");
if(response[0]=='true'){
document.getElementById('next').style.display = 'none';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please
Wait\">&nbsp;Generating View';
ss.style.cursor = 'default';
setTimeout("doNothing()",0)
if (searchReq.overrideMimeType){
searchReq.overrideMimeType('text/xml');
}
ss.innerHTML = '<table id=\"responsetable\"></table>';
setTimeout("doNothing()",300)
var tbl = document.getElementById('responsetable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = '<a href=\"javascript:verifyID();
\">refresh report</a>';
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerHTML = 'Unassigned ID\'s With Hours';
if (searchReq.readyState == 4 || searchReq.readyState ==
0) {
if (isBusy){
searchReq.abort;
}
searchReq.open('GET', response[1], true);
searchReq.onreadystatechange = verifyID4;
searchReq.send(null);
}

}
else{
ss.innerHTML = '<img src=\"check.gif\" alt=\"Check
\">&nbsp;No Unassigned ID\'s Please Contiue.';
document.getElementById('step').value = 1;
document.getElementById('s1td1').className = 'active';
document.getElementById('s1td2').className = 'active';
document.getElementById('next').value = 'Next';
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
setStep(varLoc,varSDate,varEDate,'3');
}
}
function verifyID4(){
if (searchReq.readyState == 4) {
var varLoc = document.getElementById('location').value;
var xmldoc = searchReq.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
for (var iNode = 0; iNode < root.childNodes.length; iNode+
+) {
var node = root.childNodes.item(iNode);
for (i = 0; i < node.childNodes.length; i++) {
var sibl = node.childNodes.item(i);
var len = parseInt(sibl.childNodes.length / 2);
var arr = new Array(len);
var cnt = 0;
for (x = 0; x < sibl.childNodes.length; x++) {
var sibl2 = sibl.childNodes.item(x);
var sibl3;
if (sibl2.childNodes.length > 0) {
sibl3 = sibl2.childNodes.item(0);
arr[cnt] = sibl3.data;
cnt++;
}
}
url = '<span style=\"cursor:pointer;\" onClick=
\"javascript:window.open(\'showEmpHours.php?location='+varLoc
+'&employee='+arr+'&sess='+Math.random()+'\',\'Hours_View\',
\'status=0,toolbar=0,scrollbars=1,width=620,height=480\');\">'+arr+'</
span>';
addrow("responsetable", url);
}
}
var ss = document.getElementById('reportspan')
document.getElementById('s1td1').className = 'error';
document.getElementById('s1td2').className = 'error';
}
}

Thank you in Advance....
 
P

Peter Michaux

Hello all,

I have run across an issue with IE 6.0+. I have a page that makes an
XMLHttpRequest to the webserver to update a report on the page. The
first time you hit the refresh report button the data is refreshed,
however if you try to refresh the report the onreadystatechage does
not seem to fire. I have tested this by placing an alert in the
verifyID2 & verifyID3 function to track where the XMLHttpRequest
currently is. Now when creating the Javascript i tend to lean towards
FireFox for obvious reasons. I have created similar Functions on other
pages that seem to work over multiple browsers so i am sort of
stumped.

Please let me know if you come up with anything. I have been looking
all over the place.

function verifyID(){
var ss = document.getElementById('reportspan')
ss.innerHTML = '';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please Wait
\">&nbsp;Preparing Reporting';
ss.style.cursor = 'wait';
setTimeout("verifyID2()",0);}
Click to expand...

Why use the setTimeout() call above? Why not just merge verifyID() and
verifyID2() or just call verifyID2() directly above?
function verifyID2(){
var ss = document.getElementById('reportspan')
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
ss.style.cursor = 'wait';
var url = 'get_unass_xml.php?location='+varLoc+'&sdate='+varSDate
+'&edate='+varEDate+'&ses='+ Math.random()
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
Click to expand...

searchReq just magically appeared here. When was it instantiated? Why
do you need to test it's ready state before you send the request?
alert('Preparing Send'); //added to verify we are about to send
data
searchReq.onreadystatechange = verifyID3;
searchReq.open('GET', url, true);
searchReq.send(null);
}}

function verifyID3(){
if(searchReq.readyState != 4){
Click to expand...

It looks like searchRequest is some sort of global. What happens if
two XHR requests are simultaneous. Will searchRequest point to the
second request? What happens when the first XHR (likely) returns first
and calls verifyID3()? It will try to look at the readyState of the
second request which is not 4 yet.
alert(searchReq.readyState); //added to watch ready states <-
Second run never displays this message.
return false;
}
var ss = document.getElementById('reportspan')
var response = searchReq.responseText.split(":");
if(response[0]=='true'){
document.getElementById('next').style.display = 'none';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please
Wait\">&nbsp;Generating View';
ss.style.cursor = 'default';
setTimeout("doNothing()",0)
if (searchReq.overrideMimeType){
searchReq.overrideMimeType('text/xml');
}
ss.innerHTML = '<table id=\"responsetable\"></table>';
setTimeout("doNothing()",300)
var tbl = document.getElementById('responsetable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = '<a href=\"javascript:verifyID();
\">refresh report</a>';
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerHTML = 'Unassigned ID\'s With Hours';
Click to expand...

For a posting where you are seeking help I think a lot of the above
could have been trimmed to just and alert() call.

if (searchReq.readyState == 4 || searchReq.readyState ==
0) {
if (isBusy){
searchReq.abort;
}
searchReq.open('GET', response[1], true);
searchReq.onreadystatechange = verifyID4;
searchReq.send(null);
Click to expand...

I remember reading on quirksmode.com that reusing an XHR object can
cause problems. I don't reuse XHR objects so haven't had to look into
this.
}

}
else{
ss.innerHTML = '<img src=\"check.gif\" alt=\"Check
\">&nbsp;No Unassigned ID\'s Please Contiue.';
document.getElementById('step').value = 1;
document.getElementById('s1td1').className = 'active';
document.getElementById('s1td2').className = 'active';
document.getElementById('next').value = 'Next';
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
setStep(varLoc,varSDate,varEDate,'3');
}}

function verifyID4(){
if (searchReq.readyState == 4) {
var varLoc = document.getElementById('location').value;
var xmldoc = searchReq.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
for (var iNode = 0; iNode < root.childNodes.length; iNode+
+) {
var node = root.childNodes.item(iNode);
for (i = 0; i < node.childNodes.length; i++) {
var sibl = node.childNodes.item(i);
var len = parseInt(sibl.childNodes.length / 2);
var arr = new Array(len);
var cnt = 0;
for (x = 0; x < sibl.childNodes.length; x++) {
var sibl2 = sibl.childNodes.item(x);
var sibl3;
if (sibl2.childNodes.length > 0) {
sibl3 = sibl2.childNodes.item(0);
arr[cnt] = sibl3.data;
cnt++;
}
}
url = '<span style=\"cursor:pointer;\" onClick=
\"javascript:window.open(\'showEmpHours.php?location='+varLoc
+'&employee='+arr+'&sess='+Math.random()+'\',\'Hours_View\',
\'status=0,toolbar=0,scrollbars=1,width=620,height=480\');\">'+arr+'</
span>';
addrow("responsetable", url);
}
}
var ss = document.getElementById('reportspan')
document.getElementById('s1td1').className = 'error';
document.getElementById('s1td2').className = 'error';
}

}
Click to expand...

Have you thought about extracting the XHR part of the above into an
Ajax library for reuse like Yahoo! UI or something similar? Or maybe
just using one of the many existing Ajax libraries?

Please try to trim example code as much as possible to get the best
response.

Good luck.

Peter
 
L

-Lost

I remember reading on quirksmode.com that reusing an XHR object can
cause problems. I don't reuse XHR objects so haven't had to look into
this.
Click to expand...

Hello, Mr. Michaux. Are you sure you read that correctly?

http://www.quirksmode.org/js/xmlhttp.html

Koch specifically states that in a given scenario where the requests are limited to three
to five files, creating new XMLHttpRequest objects is fine. However, this makes no sense
in an instance that requires several hundred or more requests. Reusing the object reduces
overhead.

Of course he eludes to the fact that an XMLHttpRequest should manage its requests, however
many of them there may be.

-Lost
 
T

Tom Cole

Thank you Both for your help.

I was able to find a few resources that point to creating a global
variable to set to true\false based on the XHR's state. In IE you need
to check the status of the XHR when calling additional requests on the
same object. And using the XHR.abort() function.

See here for an idea of what i am talking about.

http://www.robertnyman.com/2007/04/04/weird-xmlhttprequest-error-in-i...
Click to expand...

Another issue you may need to consider is that IE will cache GET
requests. Therefore if it finds that a previous request with the exact
same URL was already made, it will use the cached results from that
request and display it, rather than sencind a new request. You can
override this functionality by assigning a random value to the end of
your url for each request (i.e. the current time in milliseconds or
something like that).
 
L

-Lost

Tom Cole said:
Another issue you may need to consider is that IE will cache GET
requests. Therefore if it finds that a previous request with the exact
same URL was already made, it will use the cached results from that
request and display it, rather than sencind a new request. You can
override this functionality by assigning a random value to the end of
your url for each request (i.e. the current time in milliseconds or
something like that).
Click to expand...

http://jibbering.com/faq/#FAQ4_17

-Lost
 
N

Nico VanHaaster

On my querystrings i add ...&sess='+Math.random()+'... to make sure it
isn't a caches url.

That should do it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

AJAX/DOM - Works in FF but not IE? 13
I need help making a zooming function 11
I Need Help with making a function that draws in a canvas using location data. 1
timer problem in javascript 7
XMLHttpRequest IE vs FireFox 1
Attempting to access a dynamically created div 1
Javascript, Firefox, InnerHTML and AJAX 6
JavaScript IE Compatibility Issue 2

Members online

No members online now.
Total: 111 (members: 2, guests: 109)
Robots: 320

Forum statistics

Threads
474,262
Messages
2,571,052
Members
48,769
Latest member
Clifft

Latest Threads

Top