Calling all AJAX gurus ..

ron_darrell

Hi guys,

I started trying my hand at AJAX last week and pretty straight-forward so got a page up and running in about 30 mins. My first test was based on a single input field being updated. My next test (which is failing fairly spectacularly) is based on values from 5 fields.

So here are my questions. Is AJAX capable of dealing with multiple field values? (my gut tells me it can as you create the url for the script that returns the data and it is possible to POST/GET more than one variable to a page). Secondly, is there a limit on the amount of data the AJAX function can return? Thirdly, can AJAX deal with values coming from a SELECT tag instead of an input text box (some of the input fields are drop down boxes - again my gut tells me that it can)

The script I am running is to automatically price an item based on various criteria (and that is the reason for the multiple input fields) and return an updated version of the form once any of these values changes (e.g. if it changes from weighing 20kg to 300kg or if it changes from one supplier to another etc.) The form is quite heavy, containing 21 fields presented in a table (I know I should use divs but for this sort of thing I find tables easier to use) which is contained in a div (the innerHTML of which is being updated by the AJAX code).

If it comes down to it I will simply get the system to work out the price server side once the form is submitted and remove all the AJAX but I would prefer to get this working, if only as a matter of principle.

BTW I probably should say what the problem is. The AJAX script completely freezes the page and then takes over the entire clock time of the system (iexplore taking over 95% of the system resources). If this was a simple ASP script I would just assume that I had an infinite loop in there somewhere. I've checked the code and can't see it but I suppose I could be missing something.

Anyways, I'd appreciate any help I can get. Thanks in advance

-RD

PS. I will submit the server code as a last resort (there's some reasonably sensitive information that I'd prefer not to release) but will gladly provide the AJAX code (please find below)

-RD

var xmlHttp;
var rootpath;

rootpath = "";

function getPOD(str)
{
	var url = "retrieve_pod.asp?consignment=" + escape(str);
	xmlHttp = GetXmlHttpObject(podStateChanged);
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null); 
}

function getPrice(weight, quantity, source, goods_code, service)
{
	var url = "retrieve_price.asp?weight=" + weight + "&quantity=" + quantity + "&source=" + source + "&goods_code=" + goods_code + "&service=" + service;
	xmlHttp = GetXmlHttpObject(priceStateChanged);
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null); 
}

function podStateChanged()
{	
	the_state = xmlHttp.readyState;
	if(the_state == 4 || the_state == "complete")
	{
		document.getElementById("pod_chart").innerHTML = xmlHttp.responseText;
	}
}

function priceStateChanged()
{	
	the_state = xmlHttp.readyState;
	if(the_state == 4 || the_state == "complete")
	{
		document.getElementById("fill_out_form").innerHTML = xmlHttp.responseText;
	}
}

function GetXmlHttpObject(handler)
{	
	var objXmlHttp = null;

	if(navigator.userAgent.indexOf("Opera") >= 0)
	{
		alert("Opera Browsers not supported ..")
		return;
	}

	if(navigator.userAgent.indexOf("MSIE") >= 0)
	{
		var strName = "Msxml2.XMLHTTP";
		if(navigator.userAgent.indexOf("MSIE 5.5") >= 0)
		{
			strName = "Microsoft.XMLHTTP";
		}

		try
		{
			objXmlHttp = new ActiveXObject(strName);
			objXmlHttp.onreadystatechange = handler;
			return objXmlHttp;			
		}
		catch(e)
		{
			alert("Error. Scripting for ActiveX might be disabled.");
			return;
		}
	}

	if(navigator.userAgent.indexOf("Mozilla") >= 0)
	{
		objXmlHttp = new XMLHttpRequest();
		objXmlHttp.onload = handler;
		objXmlHttp.onerror = handler;
		return objXmlHttp;
	}
}

function check_pod()
{
	var the_name;
	the_name = document.getElementById('consignment').value;
	getPOD(the_name);
}

function check_price()
{
	var the_weight, the_quantity, the_source, the_goods_code, the_service;
	the_weight = document.getElementById('weight').value;
	the_quantity = document.getElementById('quantity').value;
	the_depot = document.getElementById('source').value;
	the_goods_code = document.getElementById('goods_code').value;
	the_service = document.getElementById('service').value;
	getPrice(the_weight, the_quantity, the_source, the_goods_code, the_service);
}

Eoin

There's no problem with multiple fields, or dropdown boxes - once your JavaScript can put the multiple values into a querystring, it should be fine. It also won't matter what type of element these values came from.

Your HTML code could be useful, perhaps there's a problem at the point that you call the check_price() function - is it on the onblur / onchange event of the input fields?

ron_darrell

All sorted. Sorry guys, suffered a bit of a loss at the weekend and my head still isn't on straight. I was setting a variable called the_depot in the ajax code and calling a variable called the_source. Then in the server side code I had an inifinite if else test (it alway returned to the first question and then the second). all fixed now Thanks for your help eoin

-RD

warrenaldo

Just to note - there is no limit on the amount of data theat an AJAX Function can return. You can retrieve data using JSON or an XML String(with multiple values) then just parse out the values you want.
My latest AJAX App works with google maps. I return lots and lots of data in xml format.