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

Re: select list event handlers

Expand Messages
  • 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 1 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 2 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 3 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 4 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 5 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 6 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 7 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.