Loading ...
Sorry, an error occurred while loading the content.
 

select list event handlers

Expand Messages
  • ctrlspace2706
    I m new to the Yahoo! UI toolkit and I m wondering if YAHOO.util.Event.addListener can be used for select lists and how to go about doing it. What I want to do
    Message 1 of 13 , Oct 30, 2006
      I'm new to the Yahoo! UI toolkit and I'm wondering if
      YAHOO.util.Event.addListener can be used for select lists and how to
      go about doing it.

      What I want to do is replace:

      [code]
      <select id="selectdd1" class="options" onchange="updateSelect(1)">
      <option value="1">Select 1</option>
      <option value="1">Select 2</option>
      </select>
      [/code]

      with:
      YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)

      Ok, so I know I can replace the onchange with the event listener, but
      how do I access the option being changed to? And how would I add more
      data to the call? I want to pass in a parameter to the updateSelect
      which is easy when dynamically creating the select list, but not
      apparent to me when using the event listener. Is this a valid place
      to use an event listener?

      Thanks,

      Chris.
    • Dav Glass
      Since it is an event, you can access with the getTarget method of Event... Like this: function updateSelect(ev) { var tar = YAHOO.util.Event.getTarget(ev);
      Message 2 of 13 , Oct 30, 2006
        Since it is an event, you can access with the getTarget method of Event...
        Like this:

        function updateSelect(ev) {
            var tar = YAHOO.util.Event.getTarget(ev);
            //tar is now a reference to selectdd1
        }

        Hope that helps...

         
        Dav Glass
        dav.glass@...
        davglass.com
        618.694.3476

        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: ctrlspace2706 <chris.huisman@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Monday, October 30, 2006 8:03:23 PM
        Subject: [ydn-javascript] select list event handlers

        I'm new to the Yahoo! UI toolkit and I'm wondering if
        YAHOO.util.Event.addListener can be used for select lists and how to
        go about doing it.

        What I want to do is replace:

        [code]
        <select id="selectdd1" class="options" onchange="updateSelect(1)">
        <option value="1">Select 1</option>
        <option value="1">Select 2</option>
        </select>
        [/code]

        with:
        YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)

        Ok, so I know I can replace the onchange with the event listener, but
        how do I access the option being changed to?  And how would I add more
        data to the call?  I want to pass in a parameter to the updateSelect
        which is easy when dynamically creating the select list, but not
        apparent to me when using the event listener.  Is this a valid place
        to use an event listener?

        Thanks,

        Chris.









        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com

        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/



      • ctrlspace2706
        this definitely helps, although I did go back to the traditional html method: I m trying to
        Message 3 of 13 , Oct 31, 2006
          this definitely helps, although I did go back to the traditional html
          method:

          <select id="selectdd1" class="options" onchange="updateSelect(1)">

          I'm trying to get up to speed on all the new AJAXy techniques since
          this is my first ajax project. I'll definitely use the event handlers
          at some point, but I don't know if I see the need to do it in this
          case especially considering I need to access more parameters in the js
          function. At the moment it is easier for me to do this by dynamically
          creating the the <select> html fragment.

          I would, however, like to hear your opinion on when to use YAHOO event
          handlers as apposed to html ones.

          Thanks,

          Chris.

          --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
          >
          > Since it is an event, you can access with the getTarget method of
          Event...
          > Like this:
          >
          > function updateSelect(ev) {
          > var tar = YAHOO.util.Event.getTarget(ev);
          > //tar is now a reference to selectdd1
          > }
          >
          > Hope that helps...
          >
          >
          >
          > Dav Glass
          > dav.glass@...
          > davglass.com
          > 618.694.3476
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          > ----- Original Message ----
          > From: ctrlspace2706 <chris.huisman@...>
          > To: ydn-javascript@yahoogroups.com
          > Sent: Monday, October 30, 2006 8:03:23 PM
          > Subject: [ydn-javascript] select list event handlers
          >
          > I'm new to the Yahoo! UI toolkit and I'm wondering if
          > YAHOO.util.Event.addListener can be used for select lists and how to
          > go about doing it.
          >
          > What I want to do is replace:
          >
          > [code]
          > <select id="selectdd1" class="options" onchange="updateSelect(1)">
          > <option value="1">Select 1</option>
          > <option value="1">Select 2</option>
          > </select>
          > [/code]
          >
          > with:
          > YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)
          >
          > Ok, so I know I can replace the onchange with the event listener, but
          > how do I access the option being changed to? And how would I add more
          > data to the call? I want to pass in a parameter to the updateSelect
          > which is easy when dynamically creating the select list, but not
          > apparent to me when using the event listener. Is this a valid place
          > to use an event listener?
          >
          > Thanks,
          >
          > Chris.
          >
          >
          >
          >
          >
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
        • Dav Glass
          Personally I would only use the event listeners... It keeps the junk out of the HTML.. I would rather enhance the HTML instead of clutter it up.. It also
          Message 4 of 13 , Oct 31, 2006
            Personally I would only use the event listeners... It keeps the "junk" out of the HTML..

            I would rather "enhance" the HTML instead of clutter it up..

            It also allows you to have more than one listener on an object...
             
            Dav Glass
            dav.glass@...
            davglass.com
            618.694.3476

            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: ctrlspace2706 <chris.huisman@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Tuesday, October 31, 2006 9:59:30 AM
            Subject: [ydn-javascript] Re: select list event handlers

            this definitely helps, although I did go back to the traditional html
            method:

            <select id="selectdd1" class="options" onchange="updateSelect(1)">

            I'm trying to get up to speed on all the new AJAXy techniques since
            this is my first ajax project.  I'll definitely use the event handlers
            at some point, but I don't know if I see the need to do it in this
            case especially considering I need to access more parameters in the js
            function.  At the moment it is easier for me to do this by dynamically
            creating the the <select> html fragment.

            I would, however, like to hear your opinion on when to use YAHOO event
            handlers as apposed to html ones.

            Thanks,

            Chris.

            --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
            >
            > Since it is an event, you can access with the getTarget method of
            Event...
            > Like this:
            >
            > function updateSelect(ev) {
            >     var tar = YAHOO.util.Event.getTarget(ev);
            >     //tar is now a reference to selectdd1
            > }
            >
            > Hope that helps...
            >
            >  
            >
            > Dav Glass
            > dav.glass@...
            > davglass.com
            > 618.694.3476
            >
            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            >     without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            >    McDonalds Certified Food Specialist is to fine cuisine  +
            >
            > ----- Original Message ----
            > From:
            ctrlspace2706 <chris.huisman@...>
            > To: ydn-javascript@yahoogroups.com
            > Sent: Monday, October 30, 2006 8:03:23 PM
            > Subject: [ydn-javascript] select list event handlers
            >
            > I'm new to the Yahoo! UI toolkit and I'm wondering if
            > YAHOO.util.Event.addListener can be used for select lists and how to
            > go about doing it.
            >
            > What I want to do is replace:
            >
            > [code]
            > <select id="selectdd1" class="options" onchange="updateSelect(1)">
            >  <option value="1">Select 1</option>
            >  <option value="1">Select 2</option>
            > </select>
            > [/code]
            >
            > with:
            > YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)
            >
            > Ok, so I know I can replace the onchange with the event listener, but
            > how do I access the option being changed to?  And how would I add more
            > data to
            the call?  I want to pass in a parameter to the updateSelect
            > which is easy when dynamically creating the select list, but not
            > apparent to me when using the event listener.  Is this a valid place
            > to use an event listener?
            >
            > Thanks,
            >
            > Chris.
            >
            >
            >
            >
            >
            >
            >
            >
            >  
            > Yahoo! Groups Links
            >






            Yahoo! Groups Links

            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/

            <*> Your email settings:
                Individual Email | Traditional

            <*> To change settings online go to:
                http://groups.yahoo.com/group/ydn-javascript/join
                (Yahoo! ID required)

            <*> To change settings via email:
                mailto:ydn-javascript-digest@yahoogroups.com
                mailto:ydn-javascript-fullfeatured@yahoogroups.com

            <*> To unsubscribe from this group, send an email to:
                ydn-javascript-unsubscribe@yahoogroups.com

            <*> Your use of Yahoo! Groups is subject to:
                http://docs.yahoo.com/info/terms/



          • Michael Newton
            Nobody was looking for my opinion, but here it is! Inline event handlers are about as useful, as maintainable, and as easily debugged as FONT elements. Do
            Message 5 of 13 , Oct 31, 2006
              Nobody was looking for my opinion, but here it is! Inline event
              handlers are about as useful, as maintainable, and as easily debugged
              as FONT elements.

              Do yourself a favour. STOP. Before you learn any more Javascript,
              visit this website. Read, learn, and remember. This is not an
              "AJAXy" technique, this is THE WAY.

              http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html

              </sermon>

              --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
              >
              > Personally I would only use the event listeners... It keeps the
              "junk" out of the HTML..
              >
              > I would rather "enhance" the HTML instead of clutter it up..
              >
              > It also allows you to have more than one listener on an object...
              >
              > Dav Glass
              > dav.glass@...
              > davglass.com
              > 618.694.3476
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
              > ----- Original Message ----
              > From: ctrlspace2706 <chris.huisman@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Tuesday, October 31, 2006 9:59:30 AM
              > Subject: [ydn-javascript] Re: select list event handlers
              >
              > this definitely helps, although I did go back to the traditional html
              > method:
              >
              > <select id="selectdd1" class="options" onchange="updateSelect(1)">
              >
              > I'm trying to get up to speed on all the new AJAXy techniques since
              > this is my first ajax project. I'll definitely use the event handlers
              > at some point, but I don't know if I see the need to do it in this
              > case especially considering I need to access more parameters in the js
              > function. At the moment it is easier for me to do this by dynamically
              > creating the the <select> html fragment.
              >
              > I would, however, like to hear your opinion on when to use YAHOO event
              > handlers as apposed to html ones.
              >
              > Thanks,
              >
              > Chris.
              >
              > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
              > >
              > > Since it is an event, you can access with the getTarget method of
              > Event...
              > > Like this:
              > >
              > > function updateSelect(ev) {
              > > var tar = YAHOO.util.Event.getTarget(ev);
              > > //tar is now a reference to selectdd1
              > > }
              > >
              > > Hope that helps...
              > >
              > >
              > >
              > > Dav Glass
              > > dav.glass@
              > > davglass.com
              > > 618.694.3476
              > >
              > > + Windows: n. - The most successful computer virus, ever. +
              > > + A computer without a Microsoft operating system is like a dog
              > > without bricks tied to its head +
              > > + A Microsoft Certified Systems Engineer is to computing what a
              > > McDonalds Certified Food Specialist is to fine cuisine +
              > >
              > > ----- Original Message ----
              > > From: ctrlspace2706 <chris.huisman@>
              > > To: ydn-javascript@yahoogroups.com
              > > Sent: Monday, October 30, 2006 8:03:23 PM
              > > Subject: [ydn-javascript] select list event handlers
              > >
              > > I'm new to the Yahoo! UI toolkit and I'm wondering if
              > > YAHOO.util.Event.addListener can be used for select lists and how to
              > > go about doing it.
              > >
              > > What I want to do is replace:
              > >
              > > [code]
              > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
              > > <option value="1">Select 1</option>
              > > <option value="1">Select 2</option>
              > > </select>
              > > [/code]
              > >
              > > with:
              > > YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)
              > >
              > > Ok, so I know I can replace the onchange with the event listener, but
              > > how do I access the option being changed to? And how would I add more
              > > data to the call? I want to pass in a parameter to the updateSelect
              > > which is easy when dynamically creating the select list, but not
              > > apparent to me when using the event listener. Is this a valid place
              > > to use an event listener?
              > >
              > > Thanks,
              > >
              > > Chris.
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              >
              >
              >
              >
              >
              >
              > Yahoo! Groups Links
              >
            • ctrlspace2706
              I may not have been looking for your opinion, but I m glad to hear it. After reading the mention site (specifically item 6), I m assuming by inline event you
              Message 6 of 13 , Oct 31, 2006
                I may not have been looking for your opinion, but I'm glad to hear it.
                After reading the mention site (specifically item 6), I'm assuming by
                inline event you mean putting javascript in the html fragment.

                My question is still, how do I maintain the functionality of adding
                parameters to the javascript method when using event handlers? I'm
                now adding three parameters to the updateSelect() function using a
                loop such as:

                if(t.length > 0) {
                var domId = "toppingol" + oid;
                DWRUtil.removeAllOptions(domId);
                var anchor =
                '<a href="javascript:removeTopping({0}, {1}, {2})"
                class="delete">delete</a>';
                var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                var li = dh.createTemplate({tag: 'li', html: '{0} {1}'})
                for(var I = 0; I < t.length; I++) {
                li.append(
                domId, [t[I].name,
                anchorTmpl.applyTemplate(
                [oid, t[I].id, "'" + pShortName + "'"])]);
                }
                }

                How would I add these parameters to the event handler?

                Chris.

                --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                <mnewton32@...> wrote:
                >
                > Nobody was looking for my opinion, but here it is! Inline event
                > handlers are about as useful, as maintainable, and as easily debugged
                > as FONT elements.
                >
                > Do yourself a favour. STOP. Before you learn any more Javascript,
                > visit this website. Read, learn, and remember. This is not an
                > "AJAXy" technique, this is THE WAY.
                >
                > http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                >
                > </sermon>
                >
                > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                > >
                > > Personally I would only use the event listeners... It keeps the
                > "junk" out of the HTML..
                > >
                > > I would rather "enhance" the HTML instead of clutter it up..
                > >
                > > It also allows you to have more than one listener on an object...
                > >
                > > Dav Glass
                > > dav.glass@
                > > davglass.com
                > > 618.694.3476
                > >
                > > + Windows: n. - The most successful computer virus, ever. +
                > > + A computer without a Microsoft operating system is like a dog
                > > without bricks tied to its head +
                > > + A Microsoft Certified Systems Engineer is to computing what a
                > > McDonalds Certified Food Specialist is to fine cuisine +
                > >
                > > ----- Original Message ----
                > > From: ctrlspace2706 <chris.huisman@>
                > > To: ydn-javascript@yahoogroups.com
                > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                > > Subject: [ydn-javascript] Re: select list event handlers
                > >
                > > this definitely helps, although I did go back to the traditional html
                > > method:
                > >
                > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                > >
                > > I'm trying to get up to speed on all the new AJAXy techniques since
                > > this is my first ajax project. I'll definitely use the event handlers
                > > at some point, but I don't know if I see the need to do it in this
                > > case especially considering I need to access more parameters in the js
                > > function. At the moment it is easier for me to do this by dynamically
                > > creating the the <select> html fragment.
                > >
                > > I would, however, like to hear your opinion on when to use YAHOO event
                > > handlers as apposed to html ones.
                > >
                > > Thanks,
                > >
                > > Chris.
                > >
                > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                > > >
                > > > Since it is an event, you can access with the getTarget method of
                > > Event...
                > > > Like this:
                > > >
                > > > function updateSelect(ev) {
                > > > var tar = YAHOO.util.Event.getTarget(ev);
                > > > //tar is now a reference to selectdd1
                > > > }
                > > >
                > > > Hope that helps...
                > > >
                > > >
                > > >
                > > > Dav Glass
                > > > dav.glass@
                > > > davglass.com
                > > > 618.694.3476
                > > >
                > > > + Windows: n. - The most successful computer virus, ever. +
                > > > + A computer without a Microsoft operating system is like a dog
                > > > without bricks tied to its head +
                > > > + A Microsoft Certified Systems Engineer is to computing what a
                > > > McDonalds Certified Food Specialist is to fine cuisine +
                > > >
                > > > ----- Original Message ----
                > > > From: ctrlspace2706 <chris.huisman@>
                > > > To: ydn-javascript@yahoogroups.com
                > > > Sent: Monday, October 30, 2006 8:03:23 PM
                > > > Subject: [ydn-javascript] select list event handlers
                > > >
                > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                > > > YAHOO.util.Event.addListener can be used for select lists and how to
                > > > go about doing it.
                > > >
                > > > What I want to do is replace:
                > > >
                > > > [code]
                > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                > > > <option value="1">Select 1</option>
                > > > <option value="1">Select 2</option>
                > > > </select>
                > > > [/code]
                > > >
                > > > with:
                > > > YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)
                > > >
                > > > Ok, so I know I can replace the onchange with the event
                listener, but
                > > > how do I access the option being changed to? And how would I
                add more
                > > > data to the call? I want to pass in a parameter to the updateSelect
                > > > which is easy when dynamically creating the select list, but not
                > > > apparent to me when using the event listener. Is this a valid place
                > > > to use an event listener?
                > > >
                > > > Thanks,
                > > >
                > > > Chris.
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > > Yahoo! Groups Links
                > > >
                > >
                > >
                > >
                > >
                > >
                > >
                > > Yahoo! Groups Links
                > >
                >
              • Michael Newton
                I can t make sense of that code, but using your previous example, you can simply use the existing properties of the object making the call with the this
                Message 7 of 13 , Oct 31, 2006
                  I can't make sense of that code, but using your previous example, you
                  can simply use the existing properties of the object making the call
                  with the 'this' keyword. How do you pass the properties? Use an
                  anonymous function instead of referencing the function directly. The
                  inline Javascript here:

                  <select id="selectdd1" class="options" onchange="updateSelect(1)">
                  <option value="1">Select 1</option>
                  <option value="2">Select 2</option>
                  </select>

                  would better work as:
                  YAHOO.util.addEventListener('selectedd1', 'change',
                  function(){updateSelect(this.selectedIndex)});

                  'this' refers to the select element, selectedIndex is a property
                  containing the currently selected option. Or maybe this.value would
                  work better, been a while since I worked with a select element.


                  --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                  <chris.huisman@...> wrote:
                  >
                  > I may not have been looking for your opinion, but I'm glad to hear it.
                  > After reading the mention site (specifically item 6), I'm assuming by
                  > inline event you mean putting javascript in the html fragment.
                  >
                  > My question is still, how do I maintain the functionality of adding
                  > parameters to the javascript method when using event handlers? I'm
                  > now adding three parameters to the updateSelect() function using a
                  > loop such as:
                  >
                  > if(t.length > 0) {
                  > var domId = "toppingol" + oid;
                  > DWRUtil.removeAllOptions(domId);
                  > var anchor =
                  > '<a href="javascript:removeTopping({0}, {1}, {2})"
                  > class="delete">delete</a>';
                  > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                  > var li = dh.createTemplate({tag: 'li', html: '{0} {1}'})
                  > for(var I = 0; I < t.length; I++) {
                  > li.append(
                  > domId, [t[I].name,
                  > anchorTmpl.applyTemplate(
                  > [oid, t[I].id, "'" + pShortName + "'"])]);
                  > }
                  > }
                  >
                  > How would I add these parameters to the event handler?
                  >
                  > Chris.
                  >
                  > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                  > <mnewton32@> wrote:
                  > >
                  > > Nobody was looking for my opinion, but here it is! Inline event
                  > > handlers are about as useful, as maintainable, and as easily debugged
                  > > as FONT elements.
                  > >
                  > > Do yourself a favour. STOP. Before you learn any more Javascript,
                  > > visit this website. Read, learn, and remember. This is not an
                  > > "AJAXy" technique, this is THE WAY.
                  > >
                  > >
                  http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                  > >
                  > > </sermon>
                  > >
                  > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                  > > >
                  > > > Personally I would only use the event listeners... It keeps the
                  > > "junk" out of the HTML..
                  > > >
                  > > > I would rather "enhance" the HTML instead of clutter it up..
                  > > >
                  > > > It also allows you to have more than one listener on an object...
                  > > >
                  > > > Dav Glass
                  > > > dav.glass@
                  > > > davglass.com
                  > > > 618.694.3476
                  > > >
                  > > > + Windows: n. - The most successful computer virus, ever. +
                  > > > + A computer without a Microsoft operating system is like a dog
                  > > > without bricks tied to its head +
                  > > > + A Microsoft Certified Systems Engineer is to computing what a
                  > > > McDonalds Certified Food Specialist is to fine cuisine +
                  > > >
                  > > > ----- Original Message ----
                  > > > From: ctrlspace2706 <chris.huisman@>
                  > > > To: ydn-javascript@yahoogroups.com
                  > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                  > > > Subject: [ydn-javascript] Re: select list event handlers
                  > > >
                  > > > this definitely helps, although I did go back to the traditional
                  html
                  > > > method:
                  > > >
                  > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                  > > >
                  > > > I'm trying to get up to speed on all the new AJAXy techniques since
                  > > > this is my first ajax project. I'll definitely use the event
                  handlers
                  > > > at some point, but I don't know if I see the need to do it in this
                  > > > case especially considering I need to access more parameters in
                  the js
                  > > > function. At the moment it is easier for me to do this by
                  dynamically
                  > > > creating the the <select> html fragment.
                  > > >
                  > > > I would, however, like to hear your opinion on when to use YAHOO
                  event
                  > > > handlers as apposed to html ones.
                  > > >
                  > > > Thanks,
                  > > >
                  > > > Chris.
                  > > >
                  > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                  > > > >
                  > > > > Since it is an event, you can access with the getTarget method of
                  > > > Event...
                  > > > > Like this:
                  > > > >
                  > > > > function updateSelect(ev) {
                  > > > > var tar = YAHOO.util.Event.getTarget(ev);
                  > > > > //tar is now a reference to selectdd1
                  > > > > }
                  > > > >
                  > > > > Hope that helps...
                  > > > >
                  > > > >
                  > > > >
                  > > > > Dav Glass
                  > > > > dav.glass@
                  > > > > davglass.com
                  > > > > 618.694.3476
                  > > > >
                  > > > > + Windows: n. - The most successful computer virus, ever. +
                  > > > > + A computer without a Microsoft operating system is like a dog
                  > > > > without bricks tied to its head +
                  > > > > + A Microsoft Certified Systems Engineer is to computing what a
                  > > > > McDonalds Certified Food Specialist is to fine cuisine +
                  > > > >
                  > > > > ----- Original Message ----
                  > > > > From: ctrlspace2706 <chris.huisman@>
                  > > > > To: ydn-javascript@yahoogroups.com
                  > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                  > > > > Subject: [ydn-javascript] select list event handlers
                  > > > >
                  > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                  > > > > YAHOO.util.Event.addListener can be used for select lists and
                  how to
                  > > > > go about doing it.
                  > > > >
                  > > > > What I want to do is replace:
                  > > > >
                  > > > > [code]
                  > > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                  > > > > <option value="1">Select 1</option>
                  > > > > <option value="1">Select 2</option>
                  > > > > </select>
                  > > > > [/code]
                  > > > >
                  > > > > with:
                  > > > > YAHOO.util.Event.addListener("selectdd1", "change", updateSelect)
                  > > > >
                  > > > > Ok, so I know I can replace the onchange with the event
                  > listener, but
                  > > > > how do I access the option being changed to? And how would I
                  > add more
                  > > > > data to the call? I want to pass in a parameter to the
                  updateSelect
                  > > > > which is easy when dynamically creating the select list, but not
                  > > > > apparent to me when using the event listener. Is this a valid
                  place
                  > > > > to use an event listener?
                  > > > >
                  > > > > Thanks,
                  > > > >
                  > > > > Chris.
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > > Yahoo! Groups Links
                  > > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > > Yahoo! Groups Links
                  > > >
                  > >
                  >
                • ctrlspace2706
                  Awesome, good advice, thanks again. Now I have a couple more questions... 1). If the dom element with the id the event is listening to is removed, is the event
                  Message 8 of 13 , Oct 31, 2006
                    Awesome, good advice, thanks again.

                    Now I have a couple more questions...

                    1). If the dom element with the id the event is listening to is
                    removed, is the event removed as well or do you have to explicitly
                    remove the event listener?

                    2). Do you have any suggestions for an alternative to select item
                    onchange handlers? I want to avoid the problem with keeping events
                    mouse independant
                    (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                    point 6). I mean I guess I could use radio buttons but I'm not a big
                    fan of them... the functionality in firefox 2.0 is what I want. I
                    wonder if IE 7 is the same...

                    Chris.

                    --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                    <mnewton32@...> wrote:
                    >
                    > I can't make sense of that code, but using your previous example, you
                    > can simply use the existing properties of the object making the call
                    > with the 'this' keyword. How do you pass the properties? Use an
                    > anonymous function instead of referencing the function directly. The
                    > inline Javascript here:
                    >
                    > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                    > <option value="1">Select 1</option>
                    > <option value="2">Select 2</option>
                    > </select>
                    >
                    > would better work as:
                    > YAHOO.util.addEventListener('selectedd1', 'change',
                    > function(){updateSelect(this.selectedIndex)});
                    >
                    > 'this' refers to the select element, selectedIndex is a property
                    > containing the currently selected option. Or maybe this.value would
                    > work better, been a while since I worked with a select element.
                    >
                    >
                    > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                    > <chris.huisman@> wrote:
                    > >
                    > > I may not have been looking for your opinion, but I'm glad to hear it.
                    > > After reading the mention site (specifically item 6), I'm assuming by
                    > > inline event you mean putting javascript in the html fragment.
                    > >
                    > > My question is still, how do I maintain the functionality of adding
                    > > parameters to the javascript method when using event handlers? I'm
                    > > now adding three parameters to the updateSelect() function using a
                    > > loop such as:
                    > >
                    > > if(t.length > 0) {
                    > > var domId = "toppingol" + oid;
                    > > DWRUtil.removeAllOptions(domId);
                    > > var anchor =
                    > > '<a href="javascript:removeTopping({0}, {1}, {2})"
                    > > class="delete">delete</a>';
                    > > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                    > > var li = dh.createTemplate({tag: 'li', html: '{0} {1}'})
                    > > for(var I = 0; I < t.length; I++) {
                    > > li.append(
                    > > domId, [t[I].name,
                    > > anchorTmpl.applyTemplate(
                    > > [oid, t[I].id, "'" + pShortName + "'"])]);
                    > > }
                    > > }
                    > >
                    > > How would I add these parameters to the event handler?
                    > >
                    > > Chris.
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                    > > <mnewton32@> wrote:
                    > > >
                    > > > Nobody was looking for my opinion, but here it is! Inline event
                    > > > handlers are about as useful, as maintainable, and as easily
                    debugged
                    > > > as FONT elements.
                    > > >
                    > > > Do yourself a favour. STOP. Before you learn any more Javascript,
                    > > > visit this website. Read, learn, and remember. This is not an
                    > > > "AJAXy" technique, this is THE WAY.
                    > > >
                    > > >
                    > http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                    > > >
                    > > > </sermon>
                    > > >
                    > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                    > > > >
                    > > > > Personally I would only use the event listeners... It keeps the
                    > > > "junk" out of the HTML..
                    > > > >
                    > > > > I would rather "enhance" the HTML instead of clutter it up..
                    > > > >
                    > > > > It also allows you to have more than one listener on an object...
                    > > > >
                    > > > > Dav Glass
                    > > > > dav.glass@
                    > > > > davglass.com
                    > > > > 618.694.3476
                    > > > >
                    > > > > + Windows: n. - The most successful computer virus, ever. +
                    > > > > + A computer without a Microsoft operating system is like a dog
                    > > > > without bricks tied to its head +
                    > > > > + A Microsoft Certified Systems Engineer is to computing what a
                    > > > > McDonalds Certified Food Specialist is to fine cuisine +
                    > > > >
                    > > > > ----- Original Message ----
                    > > > > From: ctrlspace2706 <chris.huisman@>
                    > > > > To: ydn-javascript@yahoogroups.com
                    > > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                    > > > > Subject: [ydn-javascript] Re: select list event handlers
                    > > > >
                    > > > > this definitely helps, although I did go back to the traditional
                    > html
                    > > > > method:
                    > > > >
                    > > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                    > > > >
                    > > > > I'm trying to get up to speed on all the new AJAXy techniques
                    since
                    > > > > this is my first ajax project. I'll definitely use the event
                    > handlers
                    > > > > at some point, but I don't know if I see the need to do it in this
                    > > > > case especially considering I need to access more parameters in
                    > the js
                    > > > > function. At the moment it is easier for me to do this by
                    > dynamically
                    > > > > creating the the <select> html fragment.
                    > > > >
                    > > > > I would, however, like to hear your opinion on when to use YAHOO
                    > event
                    > > > > handlers as apposed to html ones.
                    > > > >
                    > > > > Thanks,
                    > > > >
                    > > > > Chris.
                    > > > >
                    > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                    wrote:
                    > > > > >
                    > > > > > Since it is an event, you can access with the getTarget
                    method of
                    > > > > Event...
                    > > > > > Like this:
                    > > > > >
                    > > > > > function updateSelect(ev) {
                    > > > > > var tar = YAHOO.util.Event.getTarget(ev);
                    > > > > > //tar is now a reference to selectdd1
                    > > > > > }
                    > > > > >
                    > > > > > Hope that helps...
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > > Dav Glass
                    > > > > > dav.glass@
                    > > > > > davglass.com
                    > > > > > 618.694.3476
                    > > > > >
                    > > > > > + Windows: n. - The most successful computer virus, ever. +
                    > > > > > + A computer without a Microsoft operating system is like a dog
                    > > > > > without bricks tied to its head +
                    > > > > > + A Microsoft Certified Systems Engineer is to computing what a
                    > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                    > > > > >
                    > > > > > ----- Original Message ----
                    > > > > > From: ctrlspace2706 <chris.huisman@>
                    > > > > > To: ydn-javascript@yahoogroups.com
                    > > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                    > > > > > Subject: [ydn-javascript] select list event handlers
                    > > > > >
                    > > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                    > > > > > YAHOO.util.Event.addListener can be used for select lists and
                    > how to
                    > > > > > go about doing it.
                    > > > > >
                    > > > > > What I want to do is replace:
                    > > > > >
                    > > > > > [code]
                    > > > > > <select id="selectdd1" class="options"
                    onchange="updateSelect(1)">
                    > > > > > <option value="1">Select 1</option>
                    > > > > > <option value="1">Select 2</option>
                    > > > > > </select>
                    > > > > > [/code]
                    > > > > >
                    > > > > > with:
                    > > > > > YAHOO.util.Event.addListener("selectdd1", "change",
                    updateSelect)
                    > > > > >
                    > > > > > Ok, so I know I can replace the onchange with the event
                    > > listener, but
                    > > > > > how do I access the option being changed to? And how would I
                    > > add more
                    > > > > > data to the call? I want to pass in a parameter to the
                    > updateSelect
                    > > > > > which is easy when dynamically creating the select list, but not
                    > > > > > apparent to me when using the event listener. Is this a valid
                    > place
                    > > > > > to use an event listener?
                    > > > > >
                    > > > > > Thanks,
                    > > > > >
                    > > > > > Chris.
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > > Yahoo! Groups Links
                    > > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > > Yahoo! Groups Links
                    > > > >
                    > > >
                    > >
                    >
                  • jim g
                    ... A great book on the same subject (unobtrusive javascript) is called DOM Scripting : http://domscripting.com/book/ -Jim G -- from jimg via jimg at yojimg
                    Message 9 of 13 , Oct 31, 2006
                      > Posted by: "Michael Newton" mnewton32@... mnewton32
                      > Date: Tue Oct 31, 2006 12:45 pm (PST)
                      >
                      > Nobody was looking for my opinion, but here it is! Inline event
                      > handlers are about as useful, as maintainable, and as easily debugged
                      > as FONT elements.
                      >
                      > Do yourself a favour. STOP. Before you learn any more Javascript,
                      > visit this website. Read, learn, and remember. This is not an
                      > "AJAXy" technique, this is THE WAY.
                      >
                      > http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html


                      A great book on the same subject (unobtrusive javascript) is called
                      "DOM Scripting": http://domscripting.com/book/

                      -Jim G

                      --
                      from jimg via jimg at yojimg dot net
                    • Michael Newton
                      You could remove the listener before removing the element, although JS s garbage collection should handle that. The change event on a select box is already
                      Message 10 of 13 , Oct 31, 2006
                        You could remove the listener before removing the element, although
                        JS's garbage collection should handle that.

                        The 'change' event on a select box is already device independent. If
                        you tab to the select box with the keyboard and change it with the
                        arrow keys and then tab away, the 'change' event will fire just before
                        the 'blur' event.


                        --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                        <chris.huisman@...> wrote:
                        >
                        > Awesome, good advice, thanks again.
                        >
                        > Now I have a couple more questions...
                        >
                        > 1). If the dom element with the id the event is listening to is
                        > removed, is the event removed as well or do you have to explicitly
                        > remove the event listener?
                        >
                        > 2). Do you have any suggestions for an alternative to select item
                        > onchange handlers? I want to avoid the problem with keeping events
                        > mouse independant
                        > (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                        > point 6). I mean I guess I could use radio buttons but I'm not a big
                        > fan of them... the functionality in firefox 2.0 is what I want. I
                        > wonder if IE 7 is the same...
                        >
                        > Chris.
                        >
                        > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                        > <mnewton32@> wrote:
                        > >
                        > > I can't make sense of that code, but using your previous example, you
                        > > can simply use the existing properties of the object making the call
                        > > with the 'this' keyword. How do you pass the properties? Use an
                        > > anonymous function instead of referencing the function directly. The
                        > > inline Javascript here:
                        > >
                        > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                        > > <option value="1">Select 1</option>
                        > > <option value="2">Select 2</option>
                        > > </select>
                        > >
                        > > would better work as:
                        > > YAHOO.util.addEventListener('selectedd1', 'change',
                        > > function(){updateSelect(this.selectedIndex)});
                        > >
                        > > 'this' refers to the select element, selectedIndex is a property
                        > > containing the currently selected option. Or maybe this.value would
                        > > work better, been a while since I worked with a select element.
                        > >
                        > >
                        > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                        > > <chris.huisman@> wrote:
                        > > >
                        > > > I may not have been looking for your opinion, but I'm glad to
                        hear it.
                        > > > After reading the mention site (specifically item 6), I'm
                        assuming by
                        > > > inline event you mean putting javascript in the html fragment.
                        > > >
                        > > > My question is still, how do I maintain the functionality of adding
                        > > > parameters to the javascript method when using event handlers? I'm
                        > > > now adding three parameters to the updateSelect() function using a
                        > > > loop such as:
                        > > >
                        > > > if(t.length > 0) {
                        > > > var domId = "toppingol" + oid;
                        > > > DWRUtil.removeAllOptions(domId);
                        > > > var anchor =
                        > > > '<a href="javascript:removeTopping({0}, {1}, {2})"
                        > > > class="delete">delete</a>';
                        > > > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                        > > > var li = dh.createTemplate({tag: 'li', html: '{0} {1}'})
                        > > > for(var I = 0; I < t.length; I++) {
                        > > > li.append(
                        > > > domId, [t[I].name,
                        > > > anchorTmpl.applyTemplate(
                        > > > [oid, t[I].id, "'" + pShortName + "'"])]);
                        > > > }
                        > > > }
                        > > >
                        > > > How would I add these parameters to the event handler?
                        > > >
                        > > > Chris.
                        > > >
                        > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                        > > > <mnewton32@> wrote:
                        > > > >
                        > > > > Nobody was looking for my opinion, but here it is! Inline event
                        > > > > handlers are about as useful, as maintainable, and as easily
                        > debugged
                        > > > > as FONT elements.
                        > > > >
                        > > > > Do yourself a favour. STOP. Before you learn any more
                        Javascript,
                        > > > > visit this website. Read, learn, and remember. This is not an
                        > > > > "AJAXy" technique, this is THE WAY.
                        > > > >
                        > > > >
                        > >
                        http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                        > > > >
                        > > > > </sermon>
                        > > > >
                        > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                        wrote:
                        > > > > >
                        > > > > > Personally I would only use the event listeners... It keeps the
                        > > > > "junk" out of the HTML..
                        > > > > >
                        > > > > > I would rather "enhance" the HTML instead of clutter it up..
                        > > > > >
                        > > > > > It also allows you to have more than one listener on an
                        object...
                        > > > > >
                        > > > > > Dav Glass
                        > > > > > dav.glass@
                        > > > > > davglass.com
                        > > > > > 618.694.3476
                        > > > > >
                        > > > > > + Windows: n. - The most successful computer virus, ever. +
                        > > > > > + A computer without a Microsoft operating system is like a dog
                        > > > > > without bricks tied to its head +
                        > > > > > + A Microsoft Certified Systems Engineer is to computing what a
                        > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                        > > > > >
                        > > > > > ----- Original Message ----
                        > > > > > From: ctrlspace2706 <chris.huisman@>
                        > > > > > To: ydn-javascript@yahoogroups.com
                        > > > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                        > > > > > Subject: [ydn-javascript] Re: select list event handlers
                        > > > > >
                        > > > > > this definitely helps, although I did go back to the traditional
                        > > html
                        > > > > > method:
                        > > > > >
                        > > > > > <select id="selectdd1" class="options"
                        onchange="updateSelect(1)">
                        > > > > >
                        > > > > > I'm trying to get up to speed on all the new AJAXy techniques
                        > since
                        > > > > > this is my first ajax project. I'll definitely use the event
                        > > handlers
                        > > > > > at some point, but I don't know if I see the need to do it
                        in this
                        > > > > > case especially considering I need to access more parameters in
                        > > the js
                        > > > > > function. At the moment it is easier for me to do this by
                        > > dynamically
                        > > > > > creating the the <select> html fragment.
                        > > > > >
                        > > > > > I would, however, like to hear your opinion on when to use YAHOO
                        > > event
                        > > > > > handlers as apposed to html ones.
                        > > > > >
                        > > > > > Thanks,
                        > > > > >
                        > > > > > Chris.
                        > > > > >
                        > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                        > wrote:
                        > > > > > >
                        > > > > > > Since it is an event, you can access with the getTarget
                        > method of
                        > > > > > Event...
                        > > > > > > Like this:
                        > > > > > >
                        > > > > > > function updateSelect(ev) {
                        > > > > > > var tar = YAHOO.util.Event.getTarget(ev);
                        > > > > > > //tar is now a reference to selectdd1
                        > > > > > > }
                        > > > > > >
                        > > > > > > Hope that helps...
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > > Dav Glass
                        > > > > > > dav.glass@
                        > > > > > > davglass.com
                        > > > > > > 618.694.3476
                        > > > > > >
                        > > > > > > + Windows: n. - The most successful computer virus, ever. +
                        > > > > > > + A computer without a Microsoft operating system is like
                        a dog
                        > > > > > > without bricks tied to its head +
                        > > > > > > + A Microsoft Certified Systems Engineer is to computing
                        what a
                        > > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                        > > > > > >
                        > > > > > > ----- Original Message ----
                        > > > > > > From: ctrlspace2706 <chris.huisman@>
                        > > > > > > To: ydn-javascript@yahoogroups.com
                        > > > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                        > > > > > > Subject: [ydn-javascript] select list event handlers
                        > > > > > >
                        > > > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                        > > > > > > YAHOO.util.Event.addListener can be used for select lists and
                        > > how to
                        > > > > > > go about doing it.
                        > > > > > >
                        > > > > > > What I want to do is replace:
                        > > > > > >
                        > > > > > > [code]
                        > > > > > > <select id="selectdd1" class="options"
                        > onchange="updateSelect(1)">
                        > > > > > > <option value="1">Select 1</option>
                        > > > > > > <option value="1">Select 2</option>
                        > > > > > > </select>
                        > > > > > > [/code]
                        > > > > > >
                        > > > > > > with:
                        > > > > > > YAHOO.util.Event.addListener("selectdd1", "change",
                        > updateSelect)
                        > > > > > >
                        > > > > > > Ok, so I know I can replace the onchange with the event
                        > > > listener, but
                        > > > > > > how do I access the option being changed to? And how would I
                        > > > add more
                        > > > > > > data to the call? I want to pass in a parameter to the
                        > > updateSelect
                        > > > > > > which is easy when dynamically creating the select list,
                        but not
                        > > > > > > apparent to me when using the event listener. Is this a valid
                        > > place
                        > > > > > > to use an event listener?
                        > > > > > >
                        > > > > > > Thanks,
                        > > > > > >
                        > > > > > > Chris.
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > >
                        > > > > > > Yahoo! Groups Links
                        > > > > > >
                        > > > > >
                        > > > > >
                        > > > > >
                        > > > > >
                        > > > > >
                        > > > > >
                        > > > > > Yahoo! Groups Links
                        > > > > >
                        > > > >
                        > > >
                        > >
                        >
                      • ctrlspace2706
                        Great thanks again Mike. Now I ve run into a bit of a different problem, I m trying to dynamically create a drop down for each item in an array that will
                        Message 11 of 13 , Nov 1, 2006
                          Great thanks again Mike.

                          Now I've run into a bit of a different problem, I'm trying to dynamically create a drop down for each item in an array that will produce something like the following:

                          <div id="orderItems">                                           
                            <div id="item0" class="item pay">
                              <h2>Item 1</h2>
                              <p class="price">price</p>
                              <p class="title">Product 2
                                <a id="product2" href="#" class="delete">delete</a>
                              </p>
                              <select id="selectdd2" class="options">
                                <option value="28">select 1</option>
                                <option value="27">select 2</option>
                              </select>
                            </div>
                            <div id="item1" class="item free">
                              <h2>Item 2</h2>
                              <p class="price">price</p>
                              <p class="title">Product 1
                                <a id="product1" href="#" class="delete">delete</a>
                              </p>
                              <select id="selectdd1" class="options">
                                <option value="28">select 1</option>
                                <option value="27">select 2</option>
                              </select>
                            </div>
                          </div>

                          and attach an event handler to each of the select elements using:
                          for(var i=0; i <item.length; i++) {
                            var item = items[i]
                            var parentId = item.id;
                            YAHOO.util.Event.addListener('selectdd' + parentId, 'change',
                              function(){updateSelect(this.selectedIndex, parentId)});
                          }

                          where parentId is the id of the product the drop down select is for and updateSelect looks like:

                          function updateSelect(selectIndex, parentId) {
                           var pSelect = document.getElementById("selectdd" + parentId).options[selectIndex];
                           var pick = pSelect.value;
                           CartManager.updateSelect(parentId, pick);
                           var text = pSelect.text;
                            ...
                          }

                          The problem is when I change any of the drop downs it always uses the parameters passed into the last listener that was added.  I don't understand why I don't get two different listeners that fire seperate events.

                          Thanks,

                          Chris.

                          --- In ydn-javascript@yahoogroups.com, "Michael Newton" <mnewton32@...> wrote:
                          >
                          > You could remove the listener before removing the element, although
                          > JS's garbage collection should handle that.
                          >
                          > The 'change' event on a select box is already device independent. If
                          > you tab to the select box with the keyboard and change it with the
                          > arrow keys and then tab away, the 'change' event will fire just before
                          > the 'blur' event.
                          >
                          >
                          > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                          > chris.huisman@ wrote:
                          > >
                          > > Awesome, good advice, thanks again.
                          > >
                          > > Now I have a couple more questions...
                          > >
                          > > 1). If the dom element with the id the event is listening to is
                          > > removed, is the event removed as well or do you have to explicitly
                          > > remove the event listener?
                          > >
                          > > 2). Do you have any suggestions for an alternative to select item
                          > > onchange handlers? I want to avoid the problem with keeping events
                          > > mouse independant
                          > > (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                          > > point 6). I mean I guess I could use radio buttons but I'm not a big
                          > > fan of them... the functionality in firefox 2.0 is what I want. I
                          > > wonder if IE 7 is the same...
                          > >
                          > > Chris.
                          > >
                          > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                          > > <mnewton32@> wrote:
                          > > >
                          > > > I can't make sense of that code, but using your previous example, you
                          > > > can simply use the existing properties of the object making the call
                          > > > with the 'this' keyword. How do you pass the properties? Use an
                          > > > anonymous function instead of referencing the function directly. The
                          > > > inline Javascript here:
                          > > >
                          > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                          > > > <option value="1">Select 1</option>
                          > > > <option value="2">Select 2</option>
                          > > > </select>
                          > > >
                          > > > would better work as:
                          > > > YAHOO.util.addEventListener('selectedd1', 'change',
                          > > > function(){updateSelect(this.selectedIndex)});
                          > > >
                          > > > 'this' refers to the select element, selectedIndex is a property
                          > > > containing the currently selected option. Or maybe this.value would
                          > > > work better, been a while since I worked with a select element.
                          > > >
                          > > >
                          > > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                          > > > <chris.huisman@> wrote:
                          > > > >
                          > > > > I may not have been looking for your opinion, but I'm glad to
                          > hear it.
                          > > > > After reading the mention site (specifically item 6), I'm
                          > assuming by
                          > > > > inline event you mean putting javascript in the html fragment.
                          > > > >
                          > > > > My question is still, how do I maintain the functionality of adding
                          > > > > parameters to the javascript method when using event handlers? I'm
                          > > > > now adding three parameters to the updateSelect() function using a
                          > > > > loop such as:
                          > > > >
                          > > > > if(t.length > 0) {
                          > > > > var domId = "toppingol" + oid;
                          > > > > DWRUtil.removeAllOptions(domId);
                          > > > > var anchor =
                          > > > > '<a href="javascript:removeTopping({0}, {1}, {2})"
                          > > > > class="delete">delete</a>';
                          > > > > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                          > > > > var li = dh.createTemplate({tag: 'li', html: '{0}&nbsp;{1}'})
                          > > > > for(var I = 0; I < t.length; I++) {
                          > > > > li.append(
                          > > > > domId, [t[I].name,
                          > > > > anchorTmpl.applyTemplate(
                          > > > > [oid, t[I].id, "'" + pShortName + "'"])]);
                          > > > > }
                          > > > > }
                          > > > >
                          > > > > How would I add these parameters to the event handler?
                          > > > >
                          > > > > Chris.
                          > > > >
                          > > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                          > > > > <mnewton32@> wrote:
                          > > > > >
                          > > > > > Nobody was looking for my opinion, but here it is! Inline event
                          > > > > > handlers are about as useful, as maintainable, and as easily
                          > > debugged
                          > > > > > as FONT elements.
                          > > > > >
                          > > > > > Do yourself a favour. STOP. Before you learn any more
                          > Javascript,
                          > > > > > visit this website. Read, learn, and remember. This is not an
                          > > > > > "AJAXy" technique, this is THE WAY.
                          > > > > >
                          > > > > >
                          > > >
                          > http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                          > > > > >
                          > > > > > </sermon>
                          > > > > >
                          > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                          > wrote:
                          > > > > > >
                          > > > > > > Personally I would only use the event listeners... It keeps the
                          > > > > > "junk" out of the HTML..
                          > > > > > >
                          > > > > > > I would rather "enhance" the HTML instead of clutter it up..
                          > > > > > >
                          > > > > > > It also allows you to have more than one listener on an
                          > object...
                          > > > > > >
                          > > > > > > Dav Glass
                          > > > > > > dav.glass@
                          > > > > > > davglass.com
                          > > > > > > 618.694.3476
                          > > > > > >
                          > > > > > > + Windows: n. - The most successful computer virus, ever. +
                          > > > > > > + A computer without a Microsoft operating system is like a dog
                          > > > > > > without bricks tied to its head +
                          > > > > > > + A Microsoft Certified Systems Engineer is to computing what a
                          > > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                          > > > > > >
                          > > > > > > ----- Original Message ----
                          > > > > > > From: ctrlspace2706 <chris.huisman@>
                          > > > > > > To: ydn-javascript@yahoogroups.com
                          > > > > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                          > > > > > > Subject: [ydn-javascript] Re: select list event handlers
                          > > > > > >
                          > > > > > > this definitely helps, although I did go back to the traditional
                          > > > html
                          > > > > > > method:
                          > > > > > >
                          > > > > > > <select id="selectdd1" class="options"
                          > onchange="updateSelect(1)">
                          > > > > > >
                          > > > > > > I'm trying to get up to speed on all the new AJAXy techniques
                          > > since
                          > > > > > > this is my first ajax project. I'll definitely use the event
                          > > > handlers
                          > > > > > > at some point, but I don't know if I see the need to do it
                          > in this
                          > > > > > > case especially considering I need to access more parameters in
                          > > > the js
                          > > > > > > function. At the moment it is easier for me to do this by
                          > > > dynamically
                          > > > > > > creating the the <select> html fragment.
                          > > > > > >
                          > > > > > > I would, however, like to hear your opinion on when to use YAHOO
                          > > > event
                          > > > > > > handlers as apposed to html ones.
                          > > > > > >
                          > > > > > > Thanks,
                          > > > > > >
                          > > > > > > Chris.
                          > > > > > >
                          > > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                          > > wrote:
                          > > > > > > >
                          > > > > > > > Since it is an event, you can access with the getTarget
                          > > method of
                          > > > > > > Event...
                          > > > > > > > Like this:
                          > > > > > > >
                          > > > > > > > function updateSelect(ev) {
                          > > > > > > > var tar = YAHOO.util.Event.getTarget(ev);
                          > > > > > > > //tar is now a reference to selectdd1
                          > > > > > > > }
                          > > > > > > >
                          > > > > > > > Hope that helps...
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > > Dav Glass
                          > > > > > > > dav.glass@
                          > > > > > > > davglass.com
                          > > > > > > > 618.694.3476
                          > > > > > > >
                          > > > > > > > + Windows: n. - The most successful computer virus, ever. +
                          > > > > > > > + A computer without a Microsoft operating system is like
                          > a dog
                          > > > > > > > without bricks tied to its head +
                          > > > > > > > + A Microsoft Certified Systems Engineer is to computing
                          > what a
                          > > > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                          > > > > > > >
                          > > > > > > > ----- Original Message ----
                          > > > > > > > From: ctrlspace2706 <chris.huisman@>
                          > > > > > > > To: ydn-javascript@yahoogroups.com
                          > > > > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                          > > > > > > > Subject: [ydn-javascript] select list event handlers
                          > > > > > > >
                          > > > > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                          > > > > > > > YAHOO.util.Event.addListener can be used for select lists and
                          > > > how to
                          > > > > > > > go about doing it.
                          > > > > > > >
                          > > > > > > > What I want to do is replace:
                          > > > > > > >
                          > > > > > > > [code]
                          > > > > > > > <select id="selectdd1" class="options"
                          > > onchange="updateSelect(1)">
                          > > > > > > > <option value="1">Select 1</option>
                          > > > > > > > <option value="1">Select 2</option>
                          > > > > > > > </select>
                          > > > > > > > [/code]
                          > > > > > > >
                          > > > > > > > with:
                          > > > > > > > YAHOO.util.Event.addListener("selectdd1", "change",
                          > > updateSelect)
                          > > > > > > >
                          > > > > > > > Ok, so I know I can replace the onchange with the event
                          > > > > listener, but
                          > > > > > > > how do I access the option being changed to? And how would I
                          > > > > add more
                          > > > > > > > data to the call? I want to pass in a parameter to the
                          > > > updateSelect
                          > > > > > > > which is easy when dynamically creating the select list,
                          > but not
                          > > > > > > > apparent to me when using the event listener. Is this a valid
                          > > > place
                          > > > > > > > to use an event listener?
                          > > > > > > >
                          > > > > > > > Thanks,
                          > > > > > > >
                          > > > > > > > Chris.
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > >
                          > > > > > > > Yahoo! Groups Links
                          > > > > > > >
                          > > > > > >
                          > > > > > >
                          > > > > > >
                          > > > > > >
                          > > > > > >
                          > > > > > >
                          > > > > > > Yahoo! Groups Links
                          > > > > > >
                          > > > > >
                          > > > >
                          > > >
                          > >
                          >
                        • Michael Newton
                          You have to understand the scope that these handlers will be running in. That anonymous function is in a world of its own, with no knowledge of what
                          Message 12 of 13 , Nov 1, 2006
                            You have to understand the scope that these handlers will be running
                            in. That anonymous function is in a world of its own, with no
                            knowledge of what 'parentId' is. For your purposes, an anonymous
                            event handler has knowledge only of its element's properties and
                            methods. So you need to find a property or method of that element
                            that will tell you the ID of the parent element.

                            I suggest you run out and get a good book on Javascript and DOM
                            scripting, because getting all the answers on a newsgroup isn't going
                            to help you in the long run!

                            --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                            <chris.huisman@...> wrote:
                            >
                            > Great thanks again Mike.
                            >
                            > Now I've run into a bit of a different problem, I'm trying to
                            > dynamically create a drop down for each item in an array that will
                            > produce something like the following:
                            >
                            > <div id="orderItems">
                            > <div id="item0" class="item pay">
                            > <h2>Item 1</h2>
                            > <p class="price">price</p>
                            > <p class="title">Product 2
                            > <a id="product2" href="#" class="delete">delete</a>
                            > </p>
                            > <select id="selectdd2" class="options">
                            > <option value="28">select 1</option>
                            > <option value="27">select 2</option>
                            > </select>
                            > </div>
                            > <div id="item1" class="item free">
                            > <h2>Item 2</h2>
                            > <p class="price">price</p>
                            > <p class="title">Product 1
                            > <a id="product1" href="#" class="delete">delete</a>
                            > </p>
                            > <select id="selectdd1" class="options">
                            > <option value="28">select 1</option>
                            > <option value="27">select 2</option>
                            > </select>
                            > </div>
                            > </div>
                            >
                            > and attach an event handler to each of the select elements using:
                            > for(var i=0; i <item.length; i++) {
                            > var item = items[i]
                            > var parentId = item.id;
                            > YAHOO.util.Event.addListener('selectdd' + parentId, 'change',
                            > function(){updateSelect(this.selectedIndex, parentId)});
                            > }
                            >
                            > where parentId is the id of the product the drop down select is for and
                            > updateSelect looks like:
                            >
                            > function updateSelect(selectIndex, parentId) {
                            > var pSelect = document.getElementById("selectdd" +
                            > parentId).options[selectIndex];
                            > var pick = pSelect.value;
                            > CartManager.updateSelect(parentId, pick);
                            > var text = pSelect.text;
                            > ...
                            > }
                            >
                            > The problem is when I change any of the drop downs it always uses the
                            > parameters passed into the last listener that was added. I don't
                            > understand why I don't get two different listeners that fire seperate
                            > events.
                            >
                            > Thanks,
                            >
                            > Chris.
                            >
                            > --- In ydn-javascript@yahoogroups.com, "Michael Newton" <mnewton32@>
                            > wrote:
                            > >
                            > > You could remove the listener before removing the element, although
                            > > JS's garbage collection should handle that.
                            > >
                            > > The 'change' event on a select box is already device independent. If
                            > > you tab to the select box with the keyboard and change it with the
                            > > arrow keys and then tab away, the 'change' event will fire just before
                            > > the 'blur' event.
                            > >
                            > >
                            > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                            > > chris.huisman@ wrote:
                            > > >
                            > > > Awesome, good advice, thanks again.
                            > > >
                            > > > Now I have a couple more questions...
                            > > >
                            > > > 1). If the dom element with the id the event is listening to is
                            > > > removed, is the event removed as well or do you have to explicitly
                            > > > remove the event listener?
                            > > >
                            > > > 2). Do you have any suggestions for an alternative to select item
                            > > > onchange handlers? I want to avoid the problem with keeping events
                            > > > mouse independant
                            > > >
                            > (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                            > > > point 6). I mean I guess I could use radio buttons but I'm not a
                            > big
                            > > > fan of them... the functionality in firefox 2.0 is what I want. I
                            > > > wonder if IE 7 is the same...
                            > > >
                            > > > Chris.
                            > > >
                            > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                            > > > <mnewton32@> wrote:
                            > > > >
                            > > > > I can't make sense of that code, but using your previous example,
                            > you
                            > > > > can simply use the existing properties of the object making the
                            > call
                            > > > > with the 'this' keyword. How do you pass the properties? Use an
                            > > > > anonymous function instead of referencing the function directly.
                            > The
                            > > > > inline Javascript here:
                            > > > >
                            > > > > <select id="selectdd1" class="options" onchange="updateSelect(1)">
                            > > > > <option value="1">Select 1</option>
                            > > > > <option value="2">Select 2</option>
                            > > > > </select>
                            > > > >
                            > > > > would better work as:
                            > > > > YAHOO.util.addEventListener('selectedd1', 'change',
                            > > > > function(){updateSelect(this.selectedIndex)});
                            > > > >
                            > > > > 'this' refers to the select element, selectedIndex is a property
                            > > > > containing the currently selected option. Or maybe this.value
                            > would
                            > > > > work better, been a while since I worked with a select element.
                            > > > >
                            > > > >
                            > > > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                            > > > > <chris.huisman@> wrote:
                            > > > > >
                            > > > > > I may not have been looking for your opinion, but I'm glad to
                            > > hear it.
                            > > > > > After reading the mention site (specifically item 6), I'm
                            > > assuming by
                            > > > > > inline event you mean putting javascript in the html fragment.
                            > > > > >
                            > > > > > My question is still, how do I maintain the functionality of
                            > adding
                            > > > > > parameters to the javascript method when using event handlers?
                            > I'm
                            > > > > > now adding three parameters to the updateSelect() function using
                            > a
                            > > > > > loop such as:
                            > > > > >
                            > > > > > if(t.length > 0) {
                            > > > > > var domId = "toppingol" + oid;
                            > > > > > DWRUtil.removeAllOptions(domId);
                            > > > > > var anchor =
                            > > > > > '<a href="javascript:removeTopping({0}, {1}, {2})"
                            > > > > > class="delete">delete</a>';
                            > > > > > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                            > > > > > var li = dh.createTemplate({tag: 'li', html: '{0} {1}'})
                            > > > > > for(var I = 0; I < t.length; I++) {
                            > > > > > li.append(
                            > > > > > domId, [t[I].name,
                            > > > > > anchorTmpl.applyTemplate(
                            > > > > > [oid, t[I].id, "'" + pShortName + "'"])]);
                            > > > > > }
                            > > > > > }
                            > > > > >
                            > > > > > How would I add these parameters to the event handler?
                            > > > > >
                            > > > > > Chris.
                            > > > > >
                            > > > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                            > > > > > <mnewton32@> wrote:
                            > > > > > >
                            > > > > > > Nobody was looking for my opinion, but here it is! Inline
                            > event
                            > > > > > > handlers are about as useful, as maintainable, and as easily
                            > > > debugged
                            > > > > > > as FONT elements.
                            > > > > > >
                            > > > > > > Do yourself a favour. STOP. Before you learn any more
                            > > Javascript,
                            > > > > > > visit this website. Read, learn, and remember. This is not
                            > an
                            > > > > > > "AJAXy" technique, this is THE WAY.
                            > > > > > >
                            > > > > > >
                            > > > >
                            > >
                            > http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                            > > > > > >
                            > > > > > > </sermon>
                            > > > > > >
                            > > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@>
                            > > wrote:
                            > > > > > > >
                            > > > > > > > Personally I would only use the event listeners... It keeps
                            > the
                            > > > > > > "junk" out of the HTML..
                            > > > > > > >
                            > > > > > > > I would rather "enhance" the HTML instead of clutter it up..
                            > > > > > > >
                            > > > > > > > It also allows you to have more than one listener on an
                            > > object...
                            > > > > > > >
                            > > > > > > > Dav Glass
                            > > > > > > > dav.glass@
                            > > > > > > > davglass.com
                            > > > > > > > 618.694.3476
                            > > > > > > >
                            > > > > > > > + Windows: n. - The most successful computer virus, ever. +
                            > > > > > > > + A computer without a Microsoft operating system is like a
                            > dog
                            > > > > > > > without bricks tied to its head +
                            > > > > > > > + A Microsoft Certified Systems Engineer is to computing
                            > what a
                            > > > > > > > McDonalds Certified Food Specialist is to fine cuisine +
                            > > > > > > >
                            > > > > > > > ----- Original Message ----
                            > > > > > > > From: ctrlspace2706 <chris.huisman@>
                            > > > > > > > To: ydn-javascript@yahoogroups.com
                            > > > > > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                            > > > > > > > Subject: [ydn-javascript] Re: select list event handlers
                            > > > > > > >
                            > > > > > > > this definitely helps, although I did go back to the
                            > traditional
                            > > > > html
                            > > > > > > > method:
                            > > > > > > >
                            > > > > > > > <select id="selectdd1" class="options"
                            > > onchange="updateSelect(1)">
                            > > > > > > >
                            > > > > > > > I'm trying to get up to speed on all the new AJAXy
                            > techniques
                            > > > since
                            > > > > > > > this is my first ajax project. I'll definitely use the
                            > event
                            > > > > handlers
                            > > > > > > > at some point, but I don't know if I see the need to do it
                            > > in this
                            > > > > > > > case especially considering I need to access more parameters
                            > in
                            > > > > the js
                            > > > > > > > function. At the moment it is easier for me to do this by
                            > > > > dynamically
                            > > > > > > > creating the the <select> html fragment.
                            > > > > > > >
                            > > > > > > > I would, however, like to hear your opinion on when to use
                            > YAHOO
                            > > > > event
                            > > > > > > > handlers as apposed to html ones.
                            > > > > > > >
                            > > > > > > > Thanks,
                            > > > > > > >
                            > > > > > > > Chris.
                            > > > > > > >
                            > > > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass
                            > <dav.glass@>
                            > > > wrote:
                            > > > > > > > >
                            > > > > > > > > Since it is an event, you can access with the getTarget
                            > > > method of
                            > > > > > > > Event...
                            > > > > > > > > Like this:
                            > > > > > > > >
                            > > > > > > > > function updateSelect(ev) {
                            > > > > > > > > var tar = YAHOO.util.Event.getTarget(ev);
                            > > > > > > > > //tar is now a reference to selectdd1
                            > > > > > > > > }
                            > > > > > > > >
                            > > > > > > > > Hope that helps...
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > > Dav Glass
                            > > > > > > > > dav.glass@
                            > > > > > > > > davglass.com
                            > > > > > > > > 618.694.3476
                            > > > > > > > >
                            > > > > > > > > + Windows: n. - The most successful computer virus, ever.
                            > +
                            > > > > > > > > + A computer without a Microsoft operating system is like
                            > > a dog
                            > > > > > > > > without bricks tied to its head +
                            > > > > > > > > + A Microsoft Certified Systems Engineer is to computing
                            > > what a
                            > > > > > > > > McDonalds Certified Food Specialist is to fine cuisine
                            > +
                            > > > > > > > >
                            > > > > > > > > ----- Original Message ----
                            > > > > > > > > From: ctrlspace2706 <chris.huisman@>
                            > > > > > > > > To: ydn-javascript@yahoogroups.com
                            > > > > > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                            > > > > > > > > Subject: [ydn-javascript] select list event handlers
                            > > > > > > > >
                            > > > > > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                            > > > > > > > > YAHOO.util.Event.addListener can be used for select lists
                            > and
                            > > > > how to
                            > > > > > > > > go about doing it.
                            > > > > > > > >
                            > > > > > > > > What I want to do is replace:
                            > > > > > > > >
                            > > > > > > > > [code]
                            > > > > > > > > <select id="selectdd1" class="options"
                            > > > onchange="updateSelect(1)">
                            > > > > > > > > <option value="1">Select 1</option>
                            > > > > > > > > <option value="1">Select 2</option>
                            > > > > > > > > </select>
                            > > > > > > > > [/code]
                            > > > > > > > >
                            > > > > > > > > with:
                            > > > > > > > > YAHOO.util.Event.addListener("selectdd1", "change",
                            > > > updateSelect)
                            > > > > > > > >
                            > > > > > > > > Ok, so I know I can replace the onchange with the event
                            > > > > > listener, but
                            > > > > > > > > how do I access the option being changed to? And how
                            > would I
                            > > > > > add more
                            > > > > > > > > data to the call? I want to pass in a parameter to the
                            > > > > updateSelect
                            > > > > > > > > which is easy when dynamically creating the select list,
                            > > but not
                            > > > > > > > > apparent to me when using the event listener. Is this a
                            > valid
                            > > > > place
                            > > > > > > > > to use an event listener?
                            > > > > > > > >
                            > > > > > > > > Thanks,
                            > > > > > > > >
                            > > > > > > > > Chris.
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > >
                            > > > > > > > > Yahoo! Groups Links
                            > > > > > > > >
                            > > > > > > >
                            > > > > > > >
                            > > > > > > >
                            > > > > > > >
                            > > > > > > >
                            > > > > > > >
                            > > > > > > > Yahoo! Groups Links
                            > > > > > > >
                            > > > > > >
                            > > > > >
                            > > > >
                            > > >
                            > >
                            >
                          • ctrlspace2706
                            Mike, you ve been a fountain of knowledge, and sorry to repeat myself but thanks again. Yesterday I got into passing custom objects into the listener and now
                            Message 13 of 13 , Nov 2, 2006
                              Mike, you've been a fountain of knowledge, and sorry to repeat myself
                              but thanks again. Yesterday I got into passing custom objects into
                              the listener and now things are working well.

                              I do agree with you, picking up a good js book will help me out in the
                              long run. I'm a java developer who never thought he'd need to know
                              that js stuff. How naive of me.

                              Chris.

                              --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                              <mnewton32@...> wrote:
                              >
                              > You have to understand the scope that these handlers will be running
                              > in. That anonymous function is in a world of its own, with no
                              > knowledge of what 'parentId' is. For your purposes, an anonymous
                              > event handler has knowledge only of its element's properties and
                              > methods. So you need to find a property or method of that element
                              > that will tell you the ID of the parent element.
                              >
                              > I suggest you run out and get a good book on Javascript and DOM
                              > scripting, because getting all the answers on a newsgroup isn't going
                              > to help you in the long run!
                              >
                              > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                              > <chris.huisman@> wrote:
                              > >
                              > > Great thanks again Mike.
                              > >
                              > > Now I've run into a bit of a different problem, I'm trying to
                              > > dynamically create a drop down for each item in an array that will
                              > > produce something like the following:
                              > >
                              > > <div id="orderItems">
                              > > <div id="item0" class="item pay">
                              > > <h2>Item 1</h2>
                              > > <p class="price">price</p>
                              > > <p class="title">Product 2
                              > > <a id="product2" href="#" class="delete">delete</a>
                              > > </p>
                              > > <select id="selectdd2" class="options">
                              > > <option value="28">select 1</option>
                              > > <option value="27">select 2</option>
                              > > </select>
                              > > </div>
                              > > <div id="item1" class="item free">
                              > > <h2>Item 2</h2>
                              > > <p class="price">price</p>
                              > > <p class="title">Product 1
                              > > <a id="product1" href="#" class="delete">delete</a>
                              > > </p>
                              > > <select id="selectdd1" class="options">
                              > > <option value="28">select 1</option>
                              > > <option value="27">select 2</option>
                              > > </select>
                              > > </div>
                              > > </div>
                              > >
                              > > and attach an event handler to each of the select elements using:
                              > > for(var i=0; i <item.length; i++) {
                              > > var item = items[i]
                              > > var parentId = item.id;
                              > > YAHOO.util.Event.addListener('selectdd' + parentId, 'change',
                              > > function(){updateSelect(this.selectedIndex, parentId)});
                              > > }
                              > >
                              > > where parentId is the id of the product the drop down select is
                              for and
                              > > updateSelect looks like:
                              > >
                              > > function updateSelect(selectIndex, parentId) {
                              > > var pSelect = document.getElementById("selectdd" +
                              > > parentId).options[selectIndex];
                              > > var pick = pSelect.value;
                              > > CartManager.updateSelect(parentId, pick);
                              > > var text = pSelect.text;
                              > > ...
                              > > }
                              > >
                              > > The problem is when I change any of the drop downs it always uses the
                              > > parameters passed into the last listener that was added. I don't
                              > > understand why I don't get two different listeners that fire seperate
                              > > events.
                              > >
                              > > Thanks,
                              > >
                              > > Chris.
                              > >
                              > > --- In ydn-javascript@yahoogroups.com, "Michael Newton" <mnewton32@>
                              > > wrote:
                              > > >
                              > > > You could remove the listener before removing the element, although
                              > > > JS's garbage collection should handle that.
                              > > >
                              > > > The 'change' event on a select box is already device
                              independent. If
                              > > > you tab to the select box with the keyboard and change it with the
                              > > > arrow keys and then tab away, the 'change' event will fire just
                              before
                              > > > the 'blur' event.
                              > > >
                              > > >
                              > > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                              > > > chris.huisman@ wrote:
                              > > > >
                              > > > > Awesome, good advice, thanks again.
                              > > > >
                              > > > > Now I have a couple more questions...
                              > > > >
                              > > > > 1). If the dom element with the id the event is listening to is
                              > > > > removed, is the event removed as well or do you have to explicitly
                              > > > > remove the event listener?
                              > > > >
                              > > > > 2). Do you have any suggestions for an alternative to select item
                              > > > > onchange handlers? I want to avoid the problem with keeping
                              events
                              > > > > mouse independant
                              > > > >
                              > >
                              (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                              > > > > point 6). I mean I guess I could use radio buttons but I'm not a
                              > > big
                              > > > > fan of them... the functionality in firefox 2.0 is what I want. I
                              > > > > wonder if IE 7 is the same...
                              > > > >
                              > > > > Chris.
                              > > > >
                              > > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                              > > > > <mnewton32@> wrote:
                              > > > > >
                              > > > > > I can't make sense of that code, but using your previous
                              example,
                              > > you
                              > > > > > can simply use the existing properties of the object making the
                              > > call
                              > > > > > with the 'this' keyword. How do you pass the properties? Use an
                              > > > > > anonymous function instead of referencing the function
                              directly.
                              > > The
                              > > > > > inline Javascript here:
                              > > > > >
                              > > > > > <select id="selectdd1" class="options"
                              onchange="updateSelect(1)">
                              > > > > > <option value="1">Select 1</option>
                              > > > > > <option value="2">Select 2</option>
                              > > > > > </select>
                              > > > > >
                              > > > > > would better work as:
                              > > > > > YAHOO.util.addEventListener('selectedd1', 'change',
                              > > > > > function(){updateSelect(this.selectedIndex)});
                              > > > > >
                              > > > > > 'this' refers to the select element, selectedIndex is a property
                              > > > > > containing the currently selected option. Or maybe this.value
                              > > would
                              > > > > > work better, been a while since I worked with a select element.
                              > > > > >
                              > > > > >
                              > > > > > --- In ydn-javascript@yahoogroups.com, "ctrlspace2706"
                              > > > > > <chris.huisman@> wrote:
                              > > > > > >
                              > > > > > > I may not have been looking for your opinion, but I'm glad to
                              > > > hear it.
                              > > > > > > After reading the mention site (specifically item 6), I'm
                              > > > assuming by
                              > > > > > > inline event you mean putting javascript in the html fragment.
                              > > > > > >
                              > > > > > > My question is still, how do I maintain the functionality of
                              > > adding
                              > > > > > > parameters to the javascript method when using event
                              handlers?
                              > > I'm
                              > > > > > > now adding three parameters to the updateSelect() function
                              using
                              > > a
                              > > > > > > loop such as:
                              > > > > > >
                              > > > > > > if(t.length > 0) {
                              > > > > > > var domId = "toppingol" + oid;
                              > > > > > > DWRUtil.removeAllOptions(domId);
                              > > > > > > var anchor =
                              > > > > > > '<a href="javascript:removeTopping({0}, {1}, {2})"
                              > > > > > > class="delete">delete</a>';
                              > > > > > > var anchorTmpl = new YAHOO.ext.DomHelper.Template(anchor);
                              > > > > > > var li = dh.createTemplate({tag: 'li', html:
                              '{0} {1}'})
                              > > > > > > for(var I = 0; I < t.length; I++) {
                              > > > > > > li.append(
                              > > > > > > domId, [t[I].name,
                              > > > > > > anchorTmpl.applyTemplate(
                              > > > > > > [oid, t[I].id, "'" + pShortName + "'"])]);
                              > > > > > > }
                              > > > > > > }
                              > > > > > >
                              > > > > > > How would I add these parameters to the event handler?
                              > > > > > >
                              > > > > > > Chris.
                              > > > > > >
                              > > > > > > --- In ydn-javascript@yahoogroups.com, "Michael Newton"
                              > > > > > > <mnewton32@> wrote:
                              > > > > > > >
                              > > > > > > > Nobody was looking for my opinion, but here it is! Inline
                              > > event
                              > > > > > > > handlers are about as useful, as maintainable, and as easily
                              > > > > debugged
                              > > > > > > > as FONT elements.
                              > > > > > > >
                              > > > > > > > Do yourself a favour. STOP. Before you learn any more
                              > > > Javascript,
                              > > > > > > > visit this website. Read, learn, and remember. This is not
                              > > an
                              > > > > > > > "AJAXy" technique, this is THE WAY.
                              > > > > > > >
                              > > > > > > >
                              > > > > >
                              > > >
                              > >
                              http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
                              > > > > > > >
                              > > > > > > > </sermon>
                              > > > > > > >
                              > > > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass
                              <dav.glass@>
                              > > > wrote:
                              > > > > > > > >
                              > > > > > > > > Personally I would only use the event listeners... It
                              keeps
                              > > the
                              > > > > > > > "junk" out of the HTML..
                              > > > > > > > >
                              > > > > > > > > I would rather "enhance" the HTML instead of clutter
                              it up..
                              > > > > > > > >
                              > > > > > > > > It also allows you to have more than one listener on an
                              > > > object...
                              > > > > > > > >
                              > > > > > > > > Dav Glass
                              > > > > > > > > dav.glass@
                              > > > > > > > > davglass.com
                              > > > > > > > > 618.694.3476
                              > > > > > > > >
                              > > > > > > > > + Windows: n. - The most successful computer virus,
                              ever. +
                              > > > > > > > > + A computer without a Microsoft operating system is
                              like a
                              > > dog
                              > > > > > > > > without bricks tied to its head +
                              > > > > > > > > + A Microsoft Certified Systems Engineer is to computing
                              > > what a
                              > > > > > > > > McDonalds Certified Food Specialist is to fine
                              cuisine +
                              > > > > > > > >
                              > > > > > > > > ----- Original Message ----
                              > > > > > > > > From: ctrlspace2706 <chris.huisman@>
                              > > > > > > > > To: ydn-javascript@yahoogroups.com
                              > > > > > > > > Sent: Tuesday, October 31, 2006 9:59:30 AM
                              > > > > > > > > Subject: [ydn-javascript] Re: select list event handlers
                              > > > > > > > >
                              > > > > > > > > this definitely helps, although I did go back to the
                              > > traditional
                              > > > > > html
                              > > > > > > > > method:
                              > > > > > > > >
                              > > > > > > > > <select id="selectdd1" class="options"
                              > > > onchange="updateSelect(1)">
                              > > > > > > > >
                              > > > > > > > > I'm trying to get up to speed on all the new AJAXy
                              > > techniques
                              > > > > since
                              > > > > > > > > this is my first ajax project. I'll definitely use the
                              > > event
                              > > > > > handlers
                              > > > > > > > > at some point, but I don't know if I see the need to do it
                              > > > in this
                              > > > > > > > > case especially considering I need to access more
                              parameters
                              > > in
                              > > > > > the js
                              > > > > > > > > function. At the moment it is easier for me to do this by
                              > > > > > dynamically
                              > > > > > > > > creating the the <select> html fragment.
                              > > > > > > > >
                              > > > > > > > > I would, however, like to hear your opinion on when to use
                              > > YAHOO
                              > > > > > event
                              > > > > > > > > handlers as apposed to html ones.
                              > > > > > > > >
                              > > > > > > > > Thanks,
                              > > > > > > > >
                              > > > > > > > > Chris.
                              > > > > > > > >
                              > > > > > > > > --- In ydn-javascript@yahoogroups.com, Dav Glass
                              > > <dav.glass@>
                              > > > > wrote:
                              > > > > > > > > >
                              > > > > > > > > > Since it is an event, you can access with the getTarget
                              > > > > method of
                              > > > > > > > > Event...
                              > > > > > > > > > Like this:
                              > > > > > > > > >
                              > > > > > > > > > function updateSelect(ev) {
                              > > > > > > > > > var tar = YAHOO.util.Event.getTarget(ev);
                              > > > > > > > > > //tar is now a reference to selectdd1
                              > > > > > > > > > }
                              > > > > > > > > >
                              > > > > > > > > > Hope that helps...
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > > Dav Glass
                              > > > > > > > > > dav.glass@
                              > > > > > > > > > davglass.com
                              > > > > > > > > > 618.694.3476
                              > > > > > > > > >
                              > > > > > > > > > + Windows: n. - The most successful computer virus,
                              ever.
                              > > +
                              > > > > > > > > > + A computer without a Microsoft operating system is
                              like
                              > > > a dog
                              > > > > > > > > > without bricks tied to its head +
                              > > > > > > > > > + A Microsoft Certified Systems Engineer is to computing
                              > > > what a
                              > > > > > > > > > McDonalds Certified Food Specialist is to fine
                              cuisine
                              > > +
                              > > > > > > > > >
                              > > > > > > > > > ----- Original Message ----
                              > > > > > > > > > From: ctrlspace2706 <chris.huisman@>
                              > > > > > > > > > To: ydn-javascript@yahoogroups.com
                              > > > > > > > > > Sent: Monday, October 30, 2006 8:03:23 PM
                              > > > > > > > > > Subject: [ydn-javascript] select list event handlers
                              > > > > > > > > >
                              > > > > > > > > > I'm new to the Yahoo! UI toolkit and I'm wondering if
                              > > > > > > > > > YAHOO.util.Event.addListener can be used for select
                              lists
                              > > and
                              > > > > > how to
                              > > > > > > > > > go about doing it.
                              > > > > > > > > >
                              > > > > > > > > > What I want to do is replace:
                              > > > > > > > > >
                              > > > > > > > > > [code]
                              > > > > > > > > > <select id="selectdd1" class="options"
                              > > > > onchange="updateSelect(1)">
                              > > > > > > > > > <option value="1">Select 1</option>
                              > > > > > > > > > <option value="1">Select 2</option>
                              > > > > > > > > > </select>
                              > > > > > > > > > [/code]
                              > > > > > > > > >
                              > > > > > > > > > with:
                              > > > > > > > > > YAHOO.util.Event.addListener("selectdd1", "change",
                              > > > > updateSelect)
                              > > > > > > > > >
                              > > > > > > > > > Ok, so I know I can replace the onchange with the event
                              > > > > > > listener, but
                              > > > > > > > > > how do I access the option being changed to? And how
                              > > would I
                              > > > > > > add more
                              > > > > > > > > > data to the call? I want to pass in a parameter to the
                              > > > > > updateSelect
                              > > > > > > > > > which is easy when dynamically creating the select list,
                              > > > but not
                              > > > > > > > > > apparent to me when using the event listener. Is this a
                              > > valid
                              > > > > > place
                              > > > > > > > > > to use an event listener?
                              > > > > > > > > >
                              > > > > > > > > > Thanks,
                              > > > > > > > > >
                              > > > > > > > > > Chris.
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > >
                              > > > > > > > > > Yahoo! Groups Links
                              > > > > > > > > >
                              > > > > > > > >
                              > > > > > > > >
                              > > > > > > > >
                              > > > > > > > >
                              > > > > > > > >
                              > > > > > > > >
                              > > > > > > > > Yahoo! Groups Links
                              > > > > > > > >
                              > > > > > > >
                              > > > > > >
                              > > > > >
                              > > > >
                              > > >
                              > >
                              >
                            Your message has been successfully submitted and would be delivered to recipients shortly.