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
-~----------~----~----~----~------~----~------~--~---
