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

Re: select list event handlers

Expand Messages
  • ctrlspace2706
    this definitely helps, although I did go back to the traditional html method: I m trying to
    Message 1 of 13 , Oct 31, 2006
    • 0 Attachment
      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 2 of 13 , Oct 31, 2006
      • 0 Attachment
        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 3 of 13 , Oct 31, 2006
        • 0 Attachment
          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 4 of 13 , Oct 31, 2006
          • 0 Attachment
            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 5 of 13 , Oct 31, 2006
            • 0 Attachment
              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 6 of 13 , Oct 31, 2006
              • 0 Attachment
                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 7 of 13 , Oct 31, 2006
                • 0 Attachment
                  > 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 8 of 13 , Oct 31, 2006
                  • 0 Attachment
                    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 9 of 13 , Nov 1, 2006
                    • 0 Attachment
                      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 10 of 13 , Nov 1, 2006
                      • 0 Attachment
                        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 11 of 13 , Nov 2, 2006
                        • 0 Attachment
                          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.