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

Re: select list event handlers

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