Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts

    class-based (OO?) type-ahead combobox (attn: glenngv)

    So I'm finally trying to turn the type-ahead combobox that GlennGV wrote and I augmented into an easy-to-instantiate class, but I'm running into trouble.

    (code is attached, including example instantiation)

    How is it best to assign event handlers to elements using class-based scripting? I've got the constructor function accepting two arguments: the ID of the element which will be the type-ahead combobox, and the name of the variable (object) that's created to hold the functions and properties.

    When no arguments are passed to the constructor, I return; because at that point I'm just setting up the prototype. I create the methods, set up the prototype with the argument-free constructor, assign the prototype properties, and assign the methods to the prototype as the script loads. On page load, the object is created with a call to the constructor.

    The constructor assigns the event handlers to the select element, but as the handlers themselves are methods of the object created by the constructor, I have to use a latent-assignment method (hence the reason I'm passing in the name of the variable that is the object).

    Relevant bit of code:
    Code:
    function GVECD_Combo(anElement, theVarContainer) {
         ...
         this.element = anElement;
         // event handlers
         this.element.onkeydown = theVarContainer + ".elementKeydown()";
         this.element.onfocus = theVarContainer + ".elementFocus()";
         this.element.onclick = theVarContainer + ".updateIndex()";
         this.element.onblur = theVarContainer + ".updateIndex()";
    }
    This isn't working. When I alert() the select element's onfocus method, it shows me the right text, but it means nothing to the script engine.

    You all know I don't wish to use eval() - but right now I'm seeing only that and one other option: DOM2Events by Chris Nott, which I like but would prefer to not use because I really don't want to build a class dependent upon another class.

    Any help? TIA, ecd.
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay - first of all, you don't need to initialize the object for the prototype stuff to be added. Doing so would be redundant (even if it worked that way, which it doesn't). By creating properties on the prototype, you give all those properties to ALL instances of that object.

    Second, assigning object methods to your event handlers is simpler than you think. Remember, they expect a function reference.

    this.element.onkeydown = this.elementKeydown;
    this.element.onfocus = this.elementFocus;
    this.element.onclick = this.updateIndex;
    this.element.onblur = this.updateIndex;

    Make sense?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tips, beetle. I actually got this working about 45 minutes after I started the thread, exactly by switching the handler assignments to this.elementKeydown, etc. - and then I found I needed to change the element's event handlers to refer to this.combo, a new property that is assigned to the element in the constructor:
    this.element.combo = this;

    About creating the prototype, I guess I'm getting better at using javascript, but not so much better at understanding its inner workings. Why is it redundant? Why wouldn't I want the prototype to contain those properties? I know each new object will contain the same properties as the prototype, and that's what I'm hoping for, so I can change the properties of each individual select box (such as turn off the status display in one box, but not all of them). Is there anything wrong with this?

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You misunderstand. You DO want the prototype to have those properties - but you don't need to initialize the object for those properties to be applied. So, your whole process of creating an object w/o arguments is unecessary.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, you are correct, I misunderstood.

    Here's an updated copy of the script; let me know your thoughts. Maybe I'll post it in "Post A Script"
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •