[SOLVED] can't get past readystate 1

[bluebutterflyofyourmind]

Hey there. I know other's have posted with problems getting past ready state 1 but none that address my problem.  For some reason in my code, if I put alerts before and after my .send(null) everything works great.  Without these alerts(ie:like normal) I get stuck at ready state 1.  I have no idea what im' doing wrong or why alerts would have this kind of affect.  I'm desperate to fix this problem. any help is greatly appreciated!  thanks!

 

-grant

 

not working

function submitShout(){
httpObject = getHTTPObject();

name = getElement("nameID");
city = getElement("cityID");
shout = getElement("shoutID");
submitted = getElement("submitID");

namesubmit = encodeURIComponent(name.value);
citysubmit = encodeURIComponent(city.value);
shoutsubmit = encodeURIComponent(shout.value);

if (httpObject != null) {
	httpObject.open("GET", "shoutupdate.php?submit="+submitted.value+"&shouter="+namesubmit+"&city="+citysubmit+"&shout="+shoutsubmit, true);
	httpObject.send(null);
	httpObject.onreadystatechange = setOutput("outputID");

}

document.form.reset();
submitted.disabled = true;
}

 

Working wiht Alerts included

function submitShout(){
httpObject = getHTTPObject();

name = getElement("nameID");
city = getElement("cityID");
shout = getElement("shoutID");
submitted = getElement("submitID");

namesubmit = encodeURIComponent(name.value);
citysubmit = encodeURIComponent(city.value);
shoutsubmit = encodeURIComponent(shout.value);

if (httpObject != null) {
	httpObject.open("GET", "shoutupdate.php?submit="+submitted.value+"&shouter="+namesubmit+"&city="+citysubmit+"&shout="+shoutsubmit, true);
	alert("just press ok");
	httpObject.send(null);
	alert("we'll fix this issue soon");
	httpObject.onreadystatechange = setOutput("outputID");

}

document.form.reset();
submitted.disabled = true;
}

[corbin]

When ever you assigned a function with variables or parenthesis to a variable, it executes the function.

 

Eg:

function blah() { return true; }

var bleh = blah();

 

bleh is now true.

[bluebutterflyofyourmind]

not sure if i'm missing something here but how does that address my problem?

[corbin]

httpObject.onreadystatechange = setOutput("outputID");

 

 

The callback function will be set to what ever the setOutput call returns, not actually setOutput.

[bluebutterflyofyourmind]

this is my setoutput function

function setOutput(id){

var output = getElement(id);
if(httpObject.readyState == 4){

	output.innerHTML = httpObject.responseText;

}
else if(httpObject.readyState == 0){
	output.innerHTML = "ready state = 0";
}
else if(httpObject.readyState == 1){
	output.innerHTML = "ready state = 1";
}
else if(httpObject.readyState == 2){
	output.innerHTML = "ready state = 2";
}
else if(httpObject.readyState == 3){
	output.innerHTML = "ready state = 3";
}
else{
	output.innerHTML = "<img src=\"images/waiting.gif\"/>";	
}
}

 

 

Am i doing something wrong in here?

 

thanks

[corbin]

No, nothing is wrong in there.  The wrong part is this:

 

httpObject.onreadystatechange = setOutput("outputID");

 

 

I don't think you understand what I've been trying to say the past 2 posts, so I will go into more detail.

 

Sorry if you already know parts of this, but those parts must be there for it to be a full explanation.

 

(START PART YOU PROBABLY KNOW)

 

Anyway, AJAX, Asynchronous Java and XML, is used to make requests to pages via an API in JavaScript.  The asynchronous (asynch from here on out because asynchronous is a long word) part means that the request runs in the background, and doesn't hang the script until the request is done.  For example:

 

DoSomething();

someajaxobject.send();

DoSomething();

 

DoSomething() will be done right after send() is done; it won't wait for the content to be returned from the page.

 

Anyway, here enters the callback.  How do you know when the call to the other page is done?  Do you keep checking it?  If so, how often do you check it, and how is that going to affect the stability of the browser?  That way is obviously not what we do (a ghetto 'listener' method).  Instead, the AJAX object tells the rest of the code when it's done (well, actually when the readyState changes).

 

So, onreadystatechange is the function that is executed when the readyState changes.

 

Anyway, onreadystatechange is simply a property of the AJAX object (technically each browser has it's own AJAX object, but when I say 'the AJAX object' I mean which ever one the browser has/uses), and as such, it is just a variable.

 

(END PART YOU PROBABLY KNOW)

 

So that brings up the question of how does one assign a function to a variable?  This is where your actual problem lies.

 

So, let's use an example:

 

function MyNameIs(name) {
    return "My name is " + name + "!";
}

function MyNameIsCorbin() {
    return MyNameIs('Corbin');
}


//now, let's assign some functions to variables.

var mnic = MyNameIsCorbin;
alert(mnic()); //alerts "My name is Corbin!" since it's the same as executing MyNameIsCorbin();
var mnic2 = MyNameIsCorbin();
alert(mnic2()); //errors, because mnic2 is not a function
//isn't a function??? what?
//that's right!  mnic2 is now "My name is Corbin!", and that's obviously not a function.

/*
Think of functions in a normal context.  Like in PHP for example, if you had a function and you assigned it to a variable, you would want the return in the variable, not the actual function.  In this case though, you want the actual function in the variable.
*/

//I should mention at this point, that one can assign 'anonymous' functions to variables...  IE:
var af = function() {
   alert('Hi!');
}

af(); //alerts "Hi"

//Anyway, how does one assign a function to a variable, instead of the functions return?  With functions without parameters, it's easy.  (See the definition of mnic.)

//So how does one assign a function with parameters to a variable?  An anonymous function is one way:

var mni = function() { return MyNameIs('John'); }
alert(mni()); //alerts "My name is John!"

//But, let's say John is a variable, like:

var name = 'John';
var mni = function() { return MyNameIs(name); }

//That can become troublesome because of variable scope and what not.  One way around that would be to have a class and assign the parameters as properties and the function as a different property and what not, but I don't feel like getting into that.

 

 

Anyway, the part you've been waiting for -- the fix:

 

httpObject.onreadystatechange = function() { setOutput("outputID"); }

 

 

That will fix your code, but I do have a question.  If I had the following code:

 

function MyNameIs() {
    var name = 'Unknown';
    var SomeFunction;
}

MyNameIs.prototype.SetName = function(name) {
    this.name = name;
}

MyNameIs.prototype.DoSomeFunction = function() { this.SomeFunction(); }

//now let's say you want a fairly simple function for SomeFunction:

function SF() {
    //you just want to put out the name
    alert(MNI.name);
}

var MNI = new MyNameIs();
MNI.SetName('Corbin');
MNI.SomeFunction = SF;
MNI.DoSomeFunction();

//Do you see the problem yet?  See the way I used the global variable MNI in SF's definition?  What if I decided to go with a different variable name?  For example:

var M = new MyNameIs();
M.SetName('Corbin');
M.SomeFunction = SF;
M.DoSomeFunction();

//this would alert 'undefined' instead of 'Corbin' (or might not alert at all).  Weird, eh?  (Actually, it wouldn't in this case since MNI is actually defined, but if you took out the definition of MNI earlier, and put just this it would)

//Actually not that weird.  If I'm executing a function from inside of the class, even if the function is in a variable of the class, the function is run like it's in the scope of the class.

//So, this would be better:

function SF() { //can't actually redeclare functions, but makes good for examples ;p
    alert(this.name);
}

//now no matter what the variable holding the class is, this function will still work.

//So, in the same sense, in your setOutput function, you should be using this.(blah) instead of httpObject.(blah).  I personally am not a fan of JavaScript's seamless scopes.

 

 

 

Anyway, I'm starting to ramble, so I shall now end my book of a post.

[bluebutterflyofyourmind]

i think i'm in love with you....not to creep you out or anything.....

 

it works....i'm sooo happy now. THANK YOU!!!  you're an angel!

 

my brain hurts a bit from the explanation but it was needed.  I don't quite understand what was being done in the last code block.  are you sayingi should use this.onreadystatechange instead of httpobject.onreadystatechange?

 

thanks again!!

 

grant

[CRypt1k]

Thank you Corbin! Bluebutterflyofyourmind was helping me with a script using the similar code and same problem. I always try to figure out why something doesn't or does work, and this explanation made thing much more clear. Thank you both again!!!

[corbin]

Before I go on, I want to correct something I said earlier.

 

I forgot to mention another way to set a function to a variable with parameters.

 

var f1 = "someFunction('hi')";

 

Can work in some situations.

 

 

 

Anyway, what I meant was this.

 

 

Dang, I don't know how much you know about objects, so this is kind of hard to begin....

 

Anyway, a class is a set of functions/variables.

 

In your code, httpObject is an instance of an AJAX related class.  What that means is, it is a unique copy of the AJAX class.

 

Anyway, since the callback function is run inside of the httpObject object, it can use the this construct, which refers to the current [object] scope.

 

 

Anyway, when ever you use httpObject in the callback function, you assume the variable name which will hold the AJAX object is and always will be httpObject.  this is much better in my opinion because it's relative.

 

Let's say we're in a huge building with lots of rooms.  Each room has a name and in each room, no two people can share a name.  Now, let's say I'm in a room named "Room1" and I'm looking for someone named Bob.  Now, let's pretend it's not a particular Bob, I just like people named Bob (I should've gone with a feminine name x.x).  Now let's say I'm also super lazy (which I am), and I want to find the closest Bob.  Would I look for Bob in Room1, or would I look for Bob in the room where I am?  I would look for Bob in the current room of course, because if I'm always looking for him in Room1, what if I go to a different room?

 

 

I don't know if that made sense or not, but I gave it a go.

[bluebutterflyofyourmind]

that does make sense.  i do have some knowledge about classes and the use of "this".  in my code, where would i use httpObject and where would I use "this"?

[corbin]

You would refer to httpObject in the area where you know it will always exist.  (Unless you [your code] alters it.)

 

 

So err...  I guess I should explain variable scope now.

 

var a = 'Hi';

function f1() {
    alert(a);
}

function f2() {
    var a = 'Hello';
    alert(a);
}

f1();
f2();

 

That would alert Hi, and then it would alert Hello.

 

Better explanation:

 

//this is the global scope
var a = 'Hi'; //this is a variable in the global scope


function f1() {
    //this is f1's scope.  f1 can access the global scope, but the global scope cannot access f1's scope (unless f1 is created as a class)
    var b = 'Hello!';
    //a would have a value of "Hi" in here.
}

//b would be undefined out here

function f2() {
    //b is undefined in here too
}

//So now let's get OOP with it:

var MyClass = {
    SomeClassVariable: 'Hi',
SomeClassFunction: function() {
	alert(this.SomeClassVariable);
}
}

//Inside of MyClass, this always refers to the active instance.  So let's say instead of that, you had this:

var MyClass = {
    SomeClassVariable: 'Hi',
SomeClassFunction: function() {
	alert(mc.SomeClassVariable);
}
}

//that would only work correctly if the current instance of the class were named mc.

//eg:
var mc = MyClass;
mc.SomeClassFunction();

[bluebutterflyofyourmind]

allright i think that's making more sense. thanks a lot for the extended help and a ton for helping solve the problem. see you around the forums.  bye!

 

-Grant

[corbin]

No problem.