Win a copy of Modern JavaScript for the Impatient this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Assigning events during startup

 
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm trying to assign all the select lists on my page a function call to nSeries when their value has been changed. The nSeries function gets called correctly but if I try and check to see what the select list's id, className, or length is the values come up as undefined, undefined, and 0. What am I missing from the below code? The one select list that currently has it's className starting with term does have it's id and className set up and has 3 options in it. Any help would be greatly appreciated.

 
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Unlike as in jQuery event handling, you cannot count on the "this" pointer automatically being the target of the event. You'll need to inspect the event instance (also browser-specific, sigh) for the target reference.

Or, do yourself a favor and use jQuery for your event handling where all this will coalesce into 3 or 4 lines of code.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Bear. I was trying to learn as much as I could doing this myself before using jQuery, gain better knowledge of objects and object use. Is it far from feasible then trying to tackle this without the use of jQuery? Thanks again for the response.
 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No problem. One of the really nice things about the jQuery Event model is that the function context (this) of the handlers is automatically set to the current bubble element (which is the target if the hander is set directly on the target). That means that unless you need extra info from the Event instance, (like mouse coords or key codes) you usually don't need to fuss with it at all.

And, of course, it hides all the browsers differences from your code.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,
Here's what I did and it's working... at least on IE 7. Without having to test it on Firefox, Safari, etc.., would you happen to know if this would work on them as well? The change I made was I wrapped my function call inside of function() { myfunction(currentObject); }.

Rob
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sorry forgot to post the code as well....
 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah, the joy of closures.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks so much for the feedback and help. Once of start feeling really comfortable with Javascript and all it has to offer I'll start utilizing jQuery more to simplify the process but playing with it like this is (dare I say) a fair bit fun. Thanks again.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,
If this is suitable to be placed in another post please feel free to redirect.

Rob

To all,
I was wondering (along the same lines) if there was a way to pass in a reference to "this" when assigning a function to onreadystatechange? I want to be able to use "this" to check the status and readyState properties. Is there a way to accomplish this (again without using jQuery - for now anyways)? Appreciate "any" help on this one.

Rob
 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


Now the variable is included in any closures.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Just wondering where in the below code would you put that declaration then?

 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You wouldn't. Because you've defined the function externally and are merely using a reference, there's no opportunity to define and use a closure. This is why you see so many inline functions defined in jQuery code, which makes liberal use of closures. (aside from no needing to pollute the global namespace with needless function names).

Or, you could go the route of so-called OO JavaScript and make the function a method of an object that can hold whatever state you want. If you're heading the jQuery route, this is not a technique you'll see a lot of.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is there a way to call attach a function whereby I could use this to check the status and readyState? It doesn't have to follow what I have in the code now. I can almost recall seeing an example (non-jQuery) whereby there was an example of doing it. Would you happen to know how or point me to an example on the web? Thanks again.
 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sorry, not quite sure what you are after. Most people will just resort to using global variables, which of course, is poor and very limiting.

Of the more advanced techniques I've seen used (and used), the OO approach and the closure approach are prevalent.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,
Sorry to bother you again but do you have an example of the OO approach or closure approach? I'm not quite sure what you mean by either. If you could give me an example or point me to a good page I'd really appreciate it. I believe the example I saw may have been in a book I read awhile back by John Resig (?). It was a very good book on advanced javascript, that's why I think it may have been in there I saw something on it. Thanks again.

Rob
 
Bear Bibeault
Marshal
Posts: 67445
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here's the closure approach.




To be honest, the OO approach is too wordy (and dated, in my opinion) to spend a bunch of time on. But essentially, you use a function as a constructor, and create "methods" by creating functions as properties of the constructed objects; frequently through the prototype property of the constructor. The constructed object, upon which you can store any state you want, is available as "this" inside the methods.

If interested, look at example code that uses Prototype, where the OO paradigm is very popular.
 
They gave me pumpkin ice cream. It was not pumpkin pie ice cream. Wiping my tongue on this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic