Hey all you AJAX masters,
Here comes a long post but I know someone out there knows what's wrong here....
I have no idea why the following script doesn't work but I think I have isolated the problem. I have an 'order form' page (that calls this script) that generates new user inputs and selects with unique names (autoincrementing numbers). There are 2 select boxes; one is dynamically linked to the other so that when an option is chosen on the first, a new list of options appears on the second. All lists are drawn from mySQL database.
ie. category --> product [input for quantity]
product and category are both selects, and product list is dependant on category.
I had the script working so that when a new category was chosen, the product list would refresh, but as I generated new inputs, all of them would refresh the list of the FIRST row product select, NOT the product select in line with the altered category select.
I figured out that I wasn't accounting for the <div id=...> that I was replacing with the innerHTML call... so I tried the code you see below... the alert box tells me that the number is being passed to the function, but the readyState won't go past 0!!!!
I am already pretty far over my head and I really don't want to give this up but I have been stuck for hours. Please help me!
Thank you in advance,
http://www.hawaiiorganicmarketexchange.org
ajax_req.js:
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function stateChanged(num)
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtResult"+num).innerHTML= xmlHttp.responseText;
}
else {
alert(num + " " +xmlHttp.status);
}
}
// Will populate data based on input
function htmlData(url, qStr, ournum)
{
if (url.length==0)
{
document.getElementById("txtResult"+ournum).innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
url=url+"?"+qStr;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged(ournum);
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}productdd.php
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
mysql_connect("...", "...", "...") or die(mysql_error());
mysql_select_db("...") or die(mysql_error());
session_start();
if($_REQUEST['ch']) {
//die($_REQUEST['ch']);
$prodresult = mysql_query("SELECT * FROM catalog WHERE category='$_REQUEST[ch]'") or die(mysql_error());
?>
<select name="cityList<?php echo($_REQUEST['nn']); ?>" style="width:200px">
<?php
while($prodrow = mysql_fetch_array($prodresult)) {
?>
<?php echo($prodrow['product']); ?>
<option value="<?php echo($prodrow['product']); ?>"><?php echo($prodrow['product']); ?></option>
<?php
}
?>
</select>
<?php
}
else {
?>
<select name="cityList<?php echo($_REQUEST['nn']); ?>" style="width:200px">
<option>Please pick a category<?php echo($_REQUEST['nn']); ?></option>
</select>
<?php
}
?>orderform.php:
<head>
...
<script type="text/javascript">
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
Event.add(window, 'load', function() {
var i = 0;
Event.add('add-element', 'click', function() {
var el = document.createElement('p');
el.innerHTML = '<table border="0" cols="3"><tr><td colspan="1" style="padding-right:5px;"><select style="width:200px" onchange=\'htmlData("productdd.php","nn='+ i++ +'&ch="+this.value,'+ i +')\' name="category' + i + '" id="category' + i + '"><?php $categoryresult = mysql_query("SELECT DISTINCT category FROM catalog ORDER BY product_id DESC"); while($catrow = mysql_fetch_array($categoryresult)) { ?><option value="<?php echo($catrow['category']); ?>"><?php echo($catrow["category"]); ?></option><?php } ?></select></td><td colspan="1" style="padding-right:5px;"><div id="txtResult'+i+'"><select style="width:200px" name="cityList'+ i +'"><option>Please pick a category</option></select></div></td><td colspan="1"><input style="width:50px" type="text" name="orderelement'+ i +'" /></td></tr></table>';
var dele = document.createElement('div');
dele.innerHTML = 'Click here to close';
Dom.add(el, 'content');
Dom.add(dele, 'content');
Event.add(dele, 'click', function(e) {
Dom.remove(this);
Dom.remove(el);
});
});
});
</script>
</head>
....
<body>
<h2>Order Form</h2>
<div style="padding:0px;" id="doc">
<p style="padding:0px;" id="add-element">Add Elements</p>
<div id="content"></div>
</div>
</body>