Problem with xmlHttp.readyState 1

[mindprints]

I have a javascript/php procedure that gets stringvalues from mysql based on user preferences.

When presenting the query results for the user I use a script that jumbles the results like airport flight info displays before stabilizing the text in a readable state.

My problem is: if a user gets impatient and clicks her selector button while the airport fx is still swirling about the text, I get an error because the airport fx script ends up with null strings.

I realize that the fix is to not let the user click the select button until the airport fx has done it's routine.
but I am not sure how to code that.

Here is my html that calls the js

<form class="profiler">
<div class="tips">What sort of a name are you looking for?</div>
<input type="button" class="profilerf1" value="serious" onclick=
"funnyValue(1)" /><input type="button" class="profilerf2" value=
"funny" onclick="funnyValue(2)" /><input type="button" class=
"profilerf3" value="zanny" onclick="funnyValue(3)" />

Here is the funnyValue() function that sets up the query:

function funnyValue(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }

// set the funny value //
var funnyVal = str
profilevalues[1] = funnyVal;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

and here is the function that initiates the airport fx:

 function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 P = document.body.getElementsByTagName(tag);
	T = P.length;
	for (var i=0;i<T;i++) O[i] = new Olink(i);
	for (var i=0;i<T;i++) setTimeout("O["+i+"].over();", i*8);
 } 
 
}

finally the error code from explorer:

Webpage Script Errors

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Tue, 21 Oct 2008 09:43:35 UTC


Message: 'obj.childNodes.0' is null or not an object
Line: 46
Char: 5
Code: 0
URI: [URL unfurl="true"]http://nameyoursalon.com/includes/js/airportfx.js[/URL]

and the airport fx javascript itself:

var O = [];

var P,T;

/////////////////////////////////////////////////////////////////////////////////

var car = "-------------------- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

var tag = "p";

/////////////////////////////////////////////////////////////////////////////////

var L = car.length;



function Olink(o){

	this.o = o;

	this.txt = P[o].innerHTML;

	P[o].innerHTML = "";

	this.obj = P[o];

	this.len = this.txt.length;

	this.txa = "";

	this.txo = "";

	this.run = false;

	this.stop = false;

	this.cp = [];

	Function("O["+o+"].over();return false;");

    Function("O["+o+"].stop=true;setTimeout('P["+o+"].innerHTML=O["+o+"].txt;O["+o+"].stop=false;',1000);return false;");

	this.display = function(){

		with(this){

			if(!stop){

				run = false;

				for(i=0;i<len;i++){

					c = txa.charAt(i);

					d = txt.charAt(i);

					if(c != d){

						cp[i]++;

						run = true;

						c = car.charAt(cp[i]);

						if(cp[i] >= L) c=d;

						txa = txa.substring(0,i)+c+txa.substring(i+1,999);

					}

				}

				obj.childNodes[0].nodeValue = txa;

				if(run) setTimeout("O["+o+"].display()", 32);

			} else {

				run = false;

				txa = txt;

			}

		}

	}

	this.over = function(){

		with(this){

			txa="";

			for(i=0;i<len;i++){

				cp[i] = Math.round(Math.random()*20);

				txa += car.charAt(cp[i]);

			}

			obj.innerHTML = txa;

			if(!run) display();

		}

	}

}



function scramble(){

	P = document.body.getElementsByTagName(tag);

	T = P.length;

	for (var i=0;i<T;i++) O[i] = new Olink(i);

	for (var i=0;i<T;i++) setTimeout("O["+i+"].over();", i*16);

}

I am sure this is a simple problem - but I have played around with the ready states for some time now with out getting anywhere.

the site is viewable here:

http://nameyoursalon.com/demo/

Thank you

 

[tsuji]

[0] It can be done such as disabling the input buttons (or including other types of field elements if needed) during the time the request is not done yet.

[1] Concretely, make out a function, say disablingInput().
[tt][blue]
function disablingInput(bset) {
var oform=document.forms[0]; //suppose form indexed 0
for (var i=0;i<oform.elements.length;i++) {
if (oform.elements.type=="button") {
oform.elements.disabled=bset;
}
}
}[/blue]
[/tt]
[2] Call the function at the appropriate places.

[2.1]
[tt]
function funnyValue(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
[blue]disablingInput(true);[/blue]
// set the funny value //
var funnyVal = str
profilevalues[1] = funnyVal;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
[/tt]
[2.2]
[tt]
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
P = document.body.getElementsByTagName(tag);
T = P.length;
for (var i=0;i<T;i++) O = new Olink(i);
for (var i=0;i<T;i++) setTimeout("O["+i+"].over();", i*8);
[blue]disablingInput(false);[/blue]
}
}
[/tt]

 

[mindprints]

thank you tsuji, but perhaps I should have added that I am not using the form select button ( that was because I wanted to get a submit going whenever any of the form values were changed ie. buttons clicked and not wait for a submit of the entire form.)

but following your lead, I put an if-statement in front of each of the functions I use to do the xmlHttp so that it wont execute if the disablingInput=true. I set the disablingInput to true once the xmlHttp has executed.

if (disablingInput==false) 

{
clienteleVal = str
profilevalues[3] = clienteleVal;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

disablingInput=true; // to stop rapid button pushes
}}

Then my plan was to set the disablingInput=false after the airportfx had done it's innerHTML routine. As shown below

function stateChanged() 
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 P = document.body.getElementsByTagName(tag);

	T = P.length;
	for (var i=0;i<T;i++) O[i] = new Olink(i);
	for (var i=0;i<T;i++) setTimeout("O["+i+"].over();", i*8);
	
 
 } 
  disablingInput=false; // airport fx has finnished its routine
 }

But unfortunately the text keeps rolling long after this point and though I have tried placing the "disablingInput=false" in every possible location in the airportfx script I can never find where this script stops doings its thing, and thus the error still persists :-(

You can see the error yourself if you push any of the buttons in rapid succession on the demo site: nameyoursalon.com/demo - Chrome and FF3 keep working despite the error, but ie8 stops in its tracks.

 

[tsuji]

That is not what I posted.

 

[tsuji]

>but perhaps I should have added that I am not using the form select button
What has it to do with the applicability of my post?

I think I had posted in the form already more explicit than it usually warrants. Still the position of the function inside the loop (..==4.... etc) is taken outside. Function somehow becoming I don't know what variable... The working of inventiveness is incomprehensible.

 

[mindprints]

mindprints: but perhaps I should have added that I am not using the form select button

tsjui: What has it to do with the applicability of my post?

mindprints: Nothing. I didn't at first understand you were disabling buttons. I put your function back in the script. thank you for that.

I still cant figure out where to place the function call that turns the buttons back on so that it occurs after the fx have come to a halt, as a work-around I put in a 3 second timeout at the insert point you suggested. Not a sustainable solution, but it will have to do for now.

thank you again.

/* xmlHttp */
var xmlHttp;
/**** these are the default values for the profiler choices ****/
var funnyVal =1;
var namelength =2;
var clienteleVal =2;


/***** the array which is sent to php *****/
var profilevalues = new Array();
profilevalues[1] = funnyVal;
profilevalues[2] = namelength;
profilevalues[3] = clienteleVal;

/***** I am using three individual functions to get names until I can combine them nicely ****/

/* a function  afrom tsuji to stop the buttons from being pressed to rapidly*/

function disablingInput(bset) {
    var oform=document.forms[0];    //suppose form indexed 0
    for (var i=0;i<oform.elements.length;i++) {
        if (oform.elements[i].type=="button"){
		
            oform.elements[i].disabled=bset;
        }
    }
}
/**** this is the call for a matching name length that leaves the other variables as they were ***/

function lengthValue(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }

{
disablingInput(true); // call to button block function
// set the name length value //
var namelength = str
profilevalues[2] = namelength;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)


}}

/**** this is the call for a matching funny value that leaves the other variables as they were ***/ 
function funnyValue(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
 
{
disablingInput(true); // call to button block function
// set the funny value //
var funnyVal = str
profilevalues[1] = funnyVal;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

}}

 /**** this is the call for the clientele value that leaves the other variables as they were ***/
function clienteleValue(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
 disablingInput(true); // call to button block function
// set the clientele value //
 
{
clienteleVal = str
profilevalues[3] = clienteleVal;
var url="/includes/getnames.php"
url=url+"?q="+profilevalues[1]+"&r="+profilevalues[2]+"&s="+profilevalues[3]
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

}}

/***** this is the airport fx function it makes use of an external js script called airport.fx  if  a user fires it 
before a full set of new names are loaded the following error occurs:
Webpage Script Errors
Message: 'obj.childNodes.0' is null or not an object
Line: 46
Char: 5
Code: 0
URI: [URL unfurl="true"]http://nameyoursalon.com/includes/js/airportfx.js[/URL]

******/

function stateChanged() 
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 P = document.body.getElementsByTagName(tag);

	T = P.length;
	for (var i=0;i<T;i++) O[i] = new Olink(i);
	for (var i=0;i<T;i++) setTimeout("O["+i+"].over();", i*8);
	
 var t=setTimeout("disablingInput(false)",3000); // wait 3 secconds before turning on buttons
 } 
  
 }


....