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 [email protected] 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 -~----------~----~----~----~------~----~------~--~---
