[Rails-spinoffs] Re: Attach event to dynamically created select drop-down

[Colin Mollenhour]

I suggest avoiding use of setTimeout to get around code ordering issues at all costs. It is confusing for the coder, and it is not reliable.. i.e. if someone had a *really* slow computer or you change the code later on it could get really hairy..  Either take a step back and examine how you could do it deterministically, or better yet, don't replace the element since it isn't necessary. I'm glad you found the DoubleCombo class useful. :) Colin Andrew McCafferty wrote: Thanks Colin - that's just what I'm looking for. Incidently, I've just got the code I posted above working - albeit with a slight hack. Basically I can use the ajax OnComplete event to fire off a function outside my class that attaches the second event. This was still a bit patchy in that sometimes the DOM ID of the second select was available, sometimes it wasn't. A setTimeout() with a value of '10' *seems* to give the new select enough time to render and become available to the $() utility function. The DoubleCombo script is nicer though... Cheers, Andrew On 16 Mar, 06:48, Colin Mollenhour <[EMAIL PROTECTED]> wrote: Check this out, I think it'll make things much easier for you:http://colin.mollenhour.com/doublecombo/index.html Instead of recreating the element it just refills it so there is no need to re-attach events, just one time will be enough. Colin Andrew McCafferty wrote: Hello all, I have two SELECT drop down lists. After an option is selected from the first list, Ajax.Updater is called and generates the second SELECT drop down with the filtered results. I'm having issues trying to attach a change event to the second dropdown (I'm assuming this is because the DOM ID changes). My code looks like this: // Attach load and unload events Event.observe(window, 'load', initialize, false); Event.observe(window, 'unload', Event.unloadCache, false); var myclass = Class.create(); myclass.prototype = { initialize: function() { // Attach events here... Event.observe('Field1ElementId', 'change', this.filterField1, false); Event.observe('Field2ElementId', 'change', this.filterField2, false); }, // Narrows down field2 choice based upon selected field1 filterField1: function() { new Ajax.Updater('field1_div', '/providers/filter1', { asynchronous: true, evalScripts: true, onLoading: function(request) {Element.show('loading_div')}, onLoaded: function(request) {Element.hide('loading_div')}, parameters: Form.Element.serialize('Field1ElementId'), requestHeaders:['X-Update', 'field1_div'] }); }, // This never filterField2: function() { new Ajax.Updater('field2_div', '/providers/filter2', { asynchronous: true, evalScripts: true, requestHeaders:['X-Update', 'field2_div'] }); } } // Instantiate the phonetiq class function initialize() { test = new myclass(); } I tried moving the "Event.observe('Field2ElementId', 'change', this.filterField2, false);" line to the bottom of the filterField1 method, hoping that it would pick up the newly rendered second SELECT, but still no joy. In short, how do I go about attaching events to a dynamically created DOM element. Thanks, Andrew --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---