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

Re: select list event handlers

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