Question

i have an ajax script which is used to set the user location, the form input is a

<select id="region" onchange="city('/ajax-city.php')" ...>
   <option>

<select ..\>
   <option...>

when one of the options in the first select list is changed (onchange) an ajax request is sent to the server and the response is proccessed and the second <select> is updated.

it’s the function used to update the <select>

var city = function(page)
{
    if(xhro){ // stands for Xml Http Request Object
      var fv = document.getElementById('region').value;
      var obj = document.getElementById('city-element');
      obj.innerHTML="<span style=\"display:block; width:200px; float:right; padding:0 10px 10px 0; font-family:Tahoma; font-size:12px;\"> please wait.. </span>";
      xhro.open("POST",page);
      xhro.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xhro.onreadystatechange = function()
      {
        if(xhro.readyState==4 && xhro.status==200)
        {
            obj.innerHTML = "<select name=\"city\"  onchange=\"subcity('ajax-subcity.php')\" id=\"city\" >"+xhro.responseText+"</select>";
        }
      }
      xhro.send("city=" + fv);
}

as you can see my function adds onchange attribute in order to send another ajax request when the <select name="city"> onchange event is trigged, but when i click on the next option in the <select name="city">, in console in firebug i get this error

subcity is not a function

subcity("ajax-subcity.php");

and when i type the function in console firebug recognizes it, i think when an ajax request updates DOM elements the events are not handle like when the page normally loads.

but that is just a suggestion consider that the function city() is handled and updates <select name="city>" but in the next level(subcity()) no update happens

and creating the <option ..> s is done with php script.

it think the problem in not the subcity() function because it works in firebug BTW it’s good to be mentioned.

var subcity = function(page){
alert("problem solved");
if(xhro){
    var fv = document.getElementById('city').value;
    var obj = document.getElementById('subcity-element');
    obj.innerHTML="<span style=\"display:block; width:200px; float:right; padding:0 10px 10px 0; font-family:Tahoma; font-size:12px;\"> please wait</span>";
    xhro.open("POST",page);
    xhro.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhro.onreadystatechange = function(){
        if(xhro.readyState==4 && xhro.status==200){
            obj.innerHTML = "<select name=\"subcity\" id=\"subcity\" >"+xhro.responseText+"</select>";
        }
    }
    xhro.send("city=" + fv);
}

Answer 1

i quote :

   if(xhro.readyState==4 && xhro.status==200){
            obj.innerHTML = "<select name=\"subsity\" id=\"subcity\" >"+xhro.responseText+"</select>";
        }

Change the subcity id you use in your select ,please use “sub-city” instead of “subcity” or it will overwrite your subcity function !!!

ids are used by javascript , that’s why they must be unique. , it is not just for CSS.

EDIT :

do the same for city and city function

PS : your code is a mess , seriously ! fix it.