thr3ads.net - Rails spinoffs - Attach event to dynamically created select drop-down [Mar 2007]

If this information is useful, please help other people find it:
Share via:

Andrew McCafferty

2007-Mar-16 04:38 UTC

Attach event to dynamically created select drop-down

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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2007-Mar-16 06:48 UTC

head link

Re: Attach event to dynamically created select drop-down

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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Andrew McCafferty

2007-Mar-16 09:44 UTC

head link

Re: Attach event to dynamically created select drop-down

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
<eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org>
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2007-Mar-16 11:38 UTC

head link

Re: Attach event to dynamically created select drop-down

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
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..&nbsp; 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.<br>
<br>
I''m glad you found the DoubleCombo class useful. :)<br>
<br>
Colin<br>
<br>
Andrew McCafferty wrote:
<blockquote
 cite="mid:1174038241.082929.229910-DQ9akQtDOMMP+Mu/nRL9ZmB/v6IoIuQBVpNB7YpNyf8@public.gmane.org"
 type="cite">
  <pre wrap="">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 <a class="moz-txt-link-rfc2396E"
href="mailto:eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org">&lt;eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org&gt;</a>
wrote:
  </pre>
  <blockquote type="cite">
    <pre wrap="">Check this out, I think it''ll make
things much easier for you:<a class="moz-txt-link-freetext"
href="http://colin.mollenhour.com/doublecombo/index.html">http://colin.mollenhour.com/doublecombo/index.html</a>

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:
    </pre>
    <blockquote type="cite">
      <pre wrap="">Hello all,
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">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:
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">// Attach load and unload events
Event.observe(window, ''load'', initialize, false);
Event.observe(window, ''unload'', Event.unloadCache, false);
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">var myclass = Class.create();
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">myclass.prototype = {
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">        initialize: function() {
                // Attach events here...
                Event.observe(''Field1ElementId'',
''change'',
this.filterField1,
false);
                Event.observe(''Field2ElementId'',
''change'',
this.filterField2,
false);
        },
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">        // 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'']
                });
        },
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">        // This never
        filterField2: function() {
                new Ajax.Updater(''field2_div'',
''/providers/filter2'', {
                        asynchronous: true,
                        evalScripts: true,
                        requestHeaders:[''X-Update'',
''field2_div'']
                });
        }
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">}
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">// Instantiate the phonetiq class
function initialize() {
        test = new myclass();
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">}
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">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.
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">In short, how do I go about attaching events
to a dynamically created
DOM element.
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">Thanks,
Andrew
      </pre>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->



  </pre>
</blockquote>
<br>
--~--~---------~--~----~------------~-------~--~----~<br>
You received this message because you are subscribed to the Google Groups
&quot;Ruby on Rails: Spinoffs&quot; group. <br> To post to this
group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org <br> To
unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
<br> For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en <br>
-~----------~----~----~----~------~----~------~--~---<br>
</body>
</html>

<br>

Rails spinoffs - Mar 2007 - Attach event to dynamically created select drop-down

Attach event to dynamically created select drop-down

Re: Attach event to dynamically created select drop-down

Re: Attach event to dynamically created select drop-down

Re: Attach event to dynamically created select drop-down