Please help with some ajax code!!

[apog]

Hello,

 

I got an ajax code from Internet, but I don't know how to change something...

 

This code loads the options of a select from a php...

 

Its working great, buy I want it to show an option "Please wait..." while the options are loaded...

 

The ajax.js:

function sack(file) {
this.xmlhttp = null;

this.resetData = function() {
	this.method = "POST";
  		this.queryStringSeparator = "?";
	this.argumentSeparator = "&";
	this.URLString = "";
	this.encodeURIString = true;
  		this.execute = false;
  		this.element = null;
	this.elementObj = null;
	this.requestFile = file;
	this.vars = new Object();
	this.responseStatus = new Array(2);
  	};

this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
	this.onFail = function() { };
};

this.reset = function() {
	this.resetFunctions();
	this.resetData();
};

this.createAJAX = function() {
	try {
		this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e1) {
		try {
			this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e2) {
			this.xmlhttp = null;
		}
	}

	if (! this.xmlhttp) {
		if (typeof XMLHttpRequest != "undefined") {
			this.xmlhttp = new XMLHttpRequest();
		} else {
			this.failed = true;
		}
	}
};

this.setVar = function(name, value){
	this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
	if (true == returnvars) {
		return Array(encodeURIComponent(name), encodeURIComponent(value));
	} else {
		this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
	}
}

this.processURLString = function(string, encode) {
	encoded = encodeURIComponent(this.argumentSeparator);
	regexp = new RegExp(this.argumentSeparator + "|" + encoded);
	varArray = string.split(regexp);
	for (i = 0; i < varArray.length; i++){
		urlVars = varArray[i].split("=");
		if (true == encode){
			this.encVar(urlVars[0], urlVars[1]);
		} else {
			this.setVar(urlVars[0], urlVars[1]);
		}
	}
}

this.createURLString = function(urlstring) {
	if (this.encodeURIString && this.URLString.length) {
		this.processURLString(this.URLString, true);
	}

	if (urlstring) {
		if (this.URLString.length) {
			this.URLString += this.argumentSeparator + urlstring;
		} else {
			this.URLString = urlstring;
		}
	}

	// prevents caching of URLString
	this.setVar("rndval", new Date().getTime());

	urlstringtemp = new Array();
	for (key in this.vars) {
		if (false == this.vars[key][1] && true == this.encodeURIString) {
			encoded = this.encVar(key, this.vars[key][0], true);
			delete this.vars[key];
			this.vars[encoded[0]] = Array(encoded[1], true);
			key = encoded[0];
		}

		urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
	}
	if (urlstring){
		this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
	} else {
		this.URLString += urlstringtemp.join(this.argumentSeparator);
	}
}

this.runResponse = function() {
	eval(this.response);
}

this.runAJAX = function(urlstring) {
	if (this.failed) {
		this.onFail();
	} else {
		this.createURLString(urlstring);
		if (this.element) {
			this.elementObj = document.getElementById(this.element);
		}
		if (this.xmlhttp) {
			var self = this;
			if (this.method == "GET") {
				totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
				this.xmlhttp.open(this.method, totalurlstring, true);
			} else {
				this.xmlhttp.open(this.method, this.requestFile, true);
				try {
					this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
				} catch (e) { }
			}

			this.xmlhttp.onreadystatechange = function() {
				switch (self.xmlhttp.readyState) {
					case 1:
						self.onLoading();
						break;
					case 2:
						self.onLoaded();
						break;
					case 3:
						self.onInteractive();
						break;
					case 4:
						self.response = self.xmlhttp.responseText;
						self.responseXML = self.xmlhttp.responseXML;
						self.responseStatus[0] = self.xmlhttp.status;
						self.responseStatus[1] = self.xmlhttp.statusText;

						if (self.execute) {
							self.runResponse();
						}

						if (self.elementObj) {
							elemNodeName = self.elementObj.nodeName;
							elemNodeName.toLowerCase();
							if (elemNodeName == "input"
							|| elemNodeName == "select"
							|| elemNodeName == "option"
							|| elemNodeName == "textarea") {
								self.elementObj.value = self.response;
							} else {
								self.elementObj.innerHTML = self.response;
							}
						}
						if (self.responseStatus[0] == "200") {
							self.onCompletion();
						} else {
							self.onError();
						}

						self.URLString = "";
						break;
				}
			};

			this.xmlhttp.send(this.URLString);
		}
	}
};

this.reset();
this.createAJAX();
}

 

and the javascript with functions:

var ajax = new sack();

function getStateListSearch(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('statesearch').options.length = 0;
if(countryCode.length>0){
	ajax.requestFile = 'getStates_search.php?countryCode='+countryCode;
	ajax.onCompletion = createStatessearch;
	ajax.runAJAX();
}
}

function createStatessearch()
{
var obj = document.getElementById('statesearch');
eval(ajax.response);
}

 

This will populate a select called: statesearch, and the options that the php passes back are in this format:

obj.options[obj.options.length] = new Option('New York','New York'); 

 

I try to put some code in the readystate2 with no success...

 

Please help me!

 

Thank you all!

[mainewoods]

write out your 'Please wait..' message just before this statement:

this.xmlhttp.send(this.URLString);

remove the 'Please wait..' messsage inside of this function:

this.xmlhttp.onreadystatechange = function() {

[apog]

Thank you for your reply.

 

Can you please give me the entire code??

 

I didn't understand...

 

Thank you again!

[mainewoods]

somewhere's in your page you have to create a place to display the message:

<div id="loadingmess"></div>

then do this to turn it on:

document.getElementById("loadingmess").innerHTML = "Loading...";
this.xmlhttp.send(this.URLString);

To turn it off, add this line:

document.getElementById("loadingmess").innerHTML = "";

to this function(maybe right after the switch statement)

this.xmlhttp.onreadystatechange = function() {