0

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>
1
Contributor
1
Reply
2
Views
7 Years
Discussion Span
Last Post by sweisern
0

Hey all,

I am fairly new to posting and, seeing as this has been up for a day now and had no replies, I am wondering if I could somehow improve my post... or if the problem is too complicated I would appreciate some feedback either way.

Mahalo

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.