/    Sign up×
Community /Pin to ProfileBookmark

ReadyState stays at 1 even though script is finished

Copy linkTweet thisAlerts:
Feb 25.2010

I have run Fiddler on this and I see that the file that processes the request is finishing and returning text.

Here’s my AJAX code:

[CODE]var receiveReq = getXmlHttpRequestObject();
var mTimer;

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) { // Mozilla, Safari,…
return new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
return new ActiveXObject(“MSXML2.XMLHTTP.3.0”);
} catch (e) {
try {
return new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
} //end of function getXmlHTTPRequestObject

//Gets the current hours from the server
function SaveModule(SecID) {
//alert(‘Made it to Save Module’);
var TextURL = “/RUN_UpdateModuleAJAX.asp”;
var TextParameter = “ModuleMenu” + SecID + “=” + document.getElementById(‘modulemenu’ + SecID).value + “&CategoryMenu” + SecID + “=” + document.getElementById(‘categorymenu’ + SecID).value + “&Field1=” + document.getElementById(‘Sect’ + SecID + ‘Field1’).value + “&Field2=” + document.getElementById(‘Sect’ + SecID + ‘Field2’).value + “&PageID=” + document.getElementById(‘Sect’ + SecID + ‘PageID’).value+ “&SecID=” + SecID;
//alert(‘Text URL: ‘ + TextURL + ‘ Text Param: ‘ + TextParameter);
//alert(‘Text Parameter Length: ‘ + TextParameter.length);
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open(“POST”, TextURL, true);
receiveReq.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
receiveReq.setRequestHeader(“Content-length”, TextParameter.length);
receiveReq.setRequestHeader(“connection”, “close”);
receiveReq.onreadystatechange = UpdateSection();
receiveReq.send(TextParameter);
}
} //end of function Sav eModule

//Function for handling the return of the Save Module
function UpdateSection() {
//alert(‘Made it to UpdateSection’ + SecID)
alert(‘ReadyState: ‘ + receiveReq.readyState);
if (receiveReq.readyState == 4) {
var SectionDiv = ‘iLink_Section’ + SecID;
var xmldoc = receiveReq.responseText;
SectionDiv.innerHTML = xmldoc;
}
//alert(‘Section to update: ‘ + SectionDiv);
//MM_showHideLayers(‘iLink_PageOverlay’,”,’hide’,’iLink_ModulePicker’,”,’hide’)
}//end of function UpdateSection[/CODE]

I’ve used this exact same function other times, with no problems. With this one, the ReadyState (you can see my alert) stays at 1 and never changes. Anything I’m just missing?

Thanks for the extra eyes!

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@ahurttFeb 25.2010 — instead of this:

receiveReq.onreadystatechange = UpdateSection();

do you mean this:

receiveReq.onreadystatechange = UpdateSection;


Because when you say UpdateSection(), you are actually invoking that function and assigning its returned result to the onreadystatechange event handler. When you say UpdateSection you are assigning a reference to the function that will be invoked to the onreadystatechange event handler of the xmlhttprequest object. The way you have it now you are actually invoking the function and it's always happening right before you send() so it's always going to alert 1.
Copy linkTweet thisAlerts:
@aj_nscFeb 25.2010 — receiveReq.onreadystatechange takes a reference to a function, not an actual call to it so it should be:
<i>
</i>receiveReq.onreadystatechange = UpdateSection;


instead of
<i>
</i>receiveReq.onreadystatechange = UpdateSection();
Copy linkTweet thisAlerts:
@pgrimpoauthorFeb 25.2010 — No, that seems to work, because I do get into that function. I also pass a variable later... it's been taken out for testing. I'll try this, but I have an alert in there which shows me the readystate, and that is being executed.
Copy linkTweet thisAlerts:
@ahurttFeb 25.2010 — I think you are failing to comprehend the difference between these two statements (assuming that someFunction() exists as a defined function):

/*immediately executes someFunction() and assigns the returned result to someVariable.*/

var someVariable = someFunction();

and

/*assigns a reference to the function (or other object) named someFunction but does not immediately call that function.*/

var someVariable = someFunction;

You are opening the xml http request, doing a couple statements then calling the function which is displaying the alert. It's always going to display 1 because your objects state is always going to be in the open() state at the time you call that function. Then after that function returns you are calling send().
Copy linkTweet thisAlerts:
@pgrimpoauthorFeb 25.2010 — Gotcha.... I'm seeing it change now. Thank you. Got a few more kinks to work out, but this helps. Thanks!
Copy linkTweet thisAlerts:
@pgrimpoauthorFeb 25.2010 — Can I ask a quick follow up. In the UpdateSection() I have the following:

SectionDiv.innerHTML = xmldoc;

I want "SectionDiv" to be a variable that I can somehow set. I'm trying to make this code flexible enough to use in 6 places on a page. I pass SecID to the SaveModule, but am not sure how to make sure it gets used in "function UpdateSection()" properly. Sorry... not used to JavaScript. Thank you.
Copy linkTweet thisAlerts:
@pgrimpoauthorFeb 25.2010 — Because of how this is... I can't call the receiveReq.onreadystatechange = UpdateSection; with something like receiveReq.onreadystatechange = UpdateSection(1);

So, what is the best way for me to designate inside function UpdateSection(); what div i'm going to use for setting the innerHTML, or can I not make this something dynamic?

Sorry for the confusion.
Copy linkTweet thisAlerts:
@aj_nscFeb 26.2010 — Man, have I been there. I used to spend hours, days, and weeks figuring out how to use global variables to pass to AJAX functions called in the way your script does above.

You can do it a little differently, like this:

<i>
</i>function SaveModule(SecID) {
//alert('Made it to Save Module');
var TextURL = "/RUN_UpdateModuleAJAX.asp";
var TextParameter = "ModuleMenu" + SecID + "=" + document.getElementById('modulemenu' + SecID).value + "&amp;CategoryMenu" + SecID + "=" + document.getElementById('categorymenu' + SecID).value + "&amp;Field1=" + document.getElementById('Sect' + SecID + 'Field1').value + "&amp;Field2=" + document.getElementById('Sect' + SecID + 'Field2').value + "&amp;PageID=" + document.getElementById('Sect' + SecID + 'PageID').value+ "&amp;SecID=" + SecID;
//alert('Text URL: ' + TextURL + ' Text Param: ' + TextParameter);
//alert('Text Parameter Length: ' + TextParameter.length);
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("POST", TextURL, true);
receiveReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
receiveReq.setRequestHeader("Content-length", TextParameter.length);
receiveReq.setRequestHeader("connection", "close");
receiveReq.onreadystatechange = function() {
if (receiveReq.readyState == 4) {
var SectionDiv = 'iLink_Section' + SecID;
var xmldoc = receiveReq.responseText;
SectionDiv.innerHTML = xmldoc;
}
}
receiveReq.send(TextParameter);
}
} //end of function Sav eModule


Then, the argument SecID that you passed to SaveModule() will be available in the anonymous function that is called onreadystatechange.
Copy linkTweet thisAlerts:
@ahurttFeb 26.2010 — You could also do something like this which allows you to pass function local arguments to a ready state change handler function and receive a return value from the handler. To see it work add some script tags around it and pop it into an html document in the head section and then call someFunction() in the body tag onload:

[CODE]
var anXmlHttpReqObj = getXmlHttpRequestObject();

function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) { // Mozilla, Safari,...
return new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {alert("uh-oh!");}
}
}
}

function someFunction() {
var param1 = "foo";
var param2 = "bar";
var handlerReturnVal = null;
anXmlHttpReqObj.onreadystatechange = function() { handlerReturnVal = myHandlerFunction(param1, param2); }
var someURL = "http://www.google.com"; //whatever your URL is.
var httpMethod = "GET"; // GET/POST, whatever.
var async = true;
var status = anXmlHttpReqObj.open(httpMethod, someURL, async);
alert(handlerReturnVal + " from someFunction()");
}

function myHandlerFunction(myArgument1, myArgument2) {
alert(myArgument1); //foo
alert(myArgument2); //bar
var rdyState = anXmlHttpReqObj.readyState;
var returnVal = null;
switch (rdyState) {

case 1 :
alert("open in ready state change handler.");
returnVal = "open";
break;
case 2 :
//do something.
break;
case 3 :
//do something.
break;
case 4 :
//do something.
break;
default :
//do something.
break;
}
return returnVal;
}
[/CODE]
Copy linkTweet thisAlerts:
@pgrimpoauthorFeb 27.2010 — Thank you all so much!
×

Success!

Help @pgrimpo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...