View Single Post
Old 05-31-2008, 04:21 PM   PM User | #1
EarthWormJim
New to the CF scene

 
Join Date: May 2008
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
EarthWormJim is an unknown quantity at this point
Prototype - in IE observe onchange events broken!

So I have had issues getting IE to observe onchange events. It seems that IE refuses to trigger change events if they are observed from the document or form. The code below uses prototype (www.prototypejs.org) but my problem is probably not a prototype problem. The code works in multiple browsers (Firefox, safari and more) but just not IE. "Request" is a function.

Code:
document.observe("change", function(eve) {
  if (eve.element().id=='radio_button1'){ Request("SomeParameter"); }
  if (eve.element().id=='radio_button2'){ Request("SomeParameter"); }
  if (eve.element().id=='radio_button3'){ Request("SomeParameter"); }
  if (eve.element().id=='select_box1'){ Request("SomeParameter"); }
  if (eve.element().id=='select_box2'){ Request("SomeParameter"); }
  if (eve.element().id=='select_box3'){ Request("SomeParameter"); }
});
If I were to make the "change" a "click", that code would work in IE but using "click" would cause undesired behavior for me. So, I figured that I would use an observer for each individual element. Which in a sense works, but I have to add those observers after the OnSuccess in an Ajax.Request since I generate new elements (ajax->php) after the dom is loaded. In IE only the first newly added observer works. In other browsers all newly added observers work. So my work around needs a work around

I have a function that handles all the ajax (The "Request" function). This function has a big switch statement and what case of that switch statement is executed determines what the output of the ajax will be and where on the page the ajax response text will go etc. So after a switch case is ran, then comes the ajax.request

Code:
    new Ajax.Request(url, 
    { 
        method: 'post', 
        parameters: pars,
        onSuccess: function(resp){
            output.innerHTML = resp.responseText;
            switch (observer)
            {
            case 1:
                $('some_id).observe('change', function(){
                    Request("some_id"); 
                });
                break;
            case 2:
                $('some_id2').observe('change', function(){
                    Request("some_id2");
                });
                break;
            case 3:
                $('some_id3').observe('change', function(){
                    Request("some_id3");
                });
                break; 
            default:
                
            }
        }
    });
So the output var in the "output.innerHTML = resp.responseText;" part is just the id of the div for example where the response text from the ajax request will go for example $('div1'). The pars var in "parameters: pars," would be the post values. The url var would be the php file the ajax request talks to. The observer var is set in the switch statement leading up to the ajax.request (and the other vars too). So those new observers I set, work in all browsers I've tested except for IE. In IE only the first observer works (the one in case 1).

Anyways, I have no idea where to go from here to make this work in IE other than putting onchange events with function calls and params right in the html (which is sooo very, very lame). Any help with this is greatly appreciated.
__________________
www.prototypejs.org - the javascript prototype framework... use it and love it
EarthWormJim is offline   Reply With Quote