javascript event doesn't recognize my function

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);
}

Have you tried invoking firebug just after creating your select? (like: console.log(subcity); after obj.innerHTML = ..., inside the if) Just to be sure subcity is already defined and/or has not been redefined when your program is in that particular state. — mgibsonbr
– mgibsonbr, Commented May 19, 2012 at 6:14
what is subcity ? where is it defined ? ect , since the problem is with that function you should show the code regarding the function that causes a issues. — mpm
– mpm, Commented May 19, 2012 at 6:18
@camus the problem is not the function, function works correctly when i call it in firebug console, the problem is that the Event is not handled to the function. — shampoo
– shampoo, Commented May 19, 2012 at 6:20
I dont know , i dont have the entire code to tell you why it doesnt work. want some help or not ? then show the damn code. — mpm
– mpm, Commented May 19, 2012 at 6:23

mpm · Accepted Answer · 2012-05-19 06:58:18Z

2

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.

edited May 19, 2012 at 6:58

answered May 19, 2012 at 6:49

mpm

20.2k7 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shampoo Over a year ago

i haven't heard such a smart answer in last 3 months (i've been asking !) ... that was great .. !! thank you very very much ...

Ricardo Tomasi Over a year ago

Well, IE is the only browser where IDs magically become globals. Nice catch.

Collectives™ on Stack Overflow

javascript event doesn't recognize my function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related