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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Exclamation MooTools - dynamically addEvent gives everything value of last item

    Hello, everyone.

    I've been working with JavaScript for a long time, but I'm scratching my head over this one. I'm sure I'm missing something extremely simple. I could use extra eyes, on this.

    BTW, I'm in a DoD network, so sites like jsfiddle are blocked.

    I've got a form that will vary in length each time it's loaded. It's dynamically generated from a database query. I'll try to keep the pseudo-code simple.
    Code:
         
    <form name="rates" id="rates">
           Rate 01: <input name="rate_A_B_1" id="rate_A_B_1" class="in"><br /> 
           Rate 02: <input name="rate_A_C_1" id="rate_A_C_1" class="in"><br /> 
           Rate 03: <input name="rate_C_A_1" id="rate_C_A_1" class="out"><br />
           Rate 04: <input name="rate_A_D_1" c id="rate_A_D_1" lass="in"><br />
           Rate 05: <input name="rate_D_A_1" id="rate_D_A_1" lass="out"><br />
           Rate 06: <input name="rate_A_E_1" id="rate_A_E_1" class="in"><br />
           Rate 07: <input name="rate_E_A_1" id="rate_E_A_1" class="out"><br />
           Rate 08: <input name="rate_A_F_1" id="rate_A_F_1" class="in"><br />
           Rate 09: <input name="rate_A_G_1" id="rate_A_G_1" class="in"><br />
           Rate 10: <input name="rate_G_A_1" id="rate_G_A_1" class="out"><br />
             ...
           Rate 89: <input name="rate_A_Z_1" id="rate_A_Z_1" class="in"><br />
           Rate 90: <input name="rate_B_C_1" id="rate_B_C_1" class="in"><br />
           Rate 91: <input name="rate_C_B_1" id="rate_C_B_1" class="out"><br />
           Rate 92: <input name="rate_B_D_1" id="rate_B_D_1" class="in"><br />
           Rate 93: <input name="rate_D_B_1" id="rate_D_B_1" class="out"><br />
         </form>
    What I'm trying to do is (after the form loads, when the page is ready) add an onkeyup event to all "in" inputs that have a matching "out" input (ie, an "in" A_C_1 will get an onkeyup that will set the value of "out" C_A_1 to its value. But I do not want "out"s to overwrite "in"s.. so apply only to "in" class inputs.)

    So I thought, "Simple."

    Here's my js. Although I am using MooTools for some things, I'm mixing MooTools with straight JS for this.

    The following is placed within the 'pageviewable' section of code.
    Code:
         var inInput = $$('.in'), x, thisID, thisIDary, elmnt;
         for(x in inInput){
           if(typeof(inInput[x].id) !== 'undefined'){
             thisID = inInput[x].id.trim();
             thisIDary = thisID.split("_");
             outID = thisIDary[0] + "_" + thisIDary[2] + "_" + thisIDary[1] + "_" + thisIDary[3];
             outID = outID.trim(); outID = document.id(outID);
             $(thisID).addEvent('keyup',function(){
               $(outID).set('value',$(thisID).get('value'));
               }
             }
           }
    Unfortunately, this will set a keyup event on all "in" class inputs that will set the associated "out" to the value of the last "in" input of the form (rate_B_D_1 in my pseudo-code.)

    I'm sure I'm missing something simple. Could someone please point out my error? Thank you,
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I don't know anything about mooTools, so here is one way to do it with straight JS. I didn't run your code, but it sounds like a closure problem to me, which I guess you know is a common problem when attaching event listeners in a loop. There are other ways around it, but I find it most intuitive to use the element that received the event itself. Let me know if this is what you had in mind...

    Code:
    <script>
    var ins =document.querySelectorAll(".in");
    for (var i = 0; i < ins.length; ++i) {
    ins[i].onkeyup=function(e){
    var event = window.event ? window.event : e;
    var elem = event.target ? event.target : event.srcElement;
    var bits=elem.id.split("_");
    var to="rate_"+bits[2]+"_"+bits[1]+"_"+bits[3];
    if(document.getElementById(to)){
    document.getElementById(to).value=elem.value;
    		}
    	}
    }
    </script>

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can actually optimize it by avoiding loop and attach the onkeyup event only once to the form and not to the inputs. This is called event delegation.

    Code:
    document.getElementById('rates').onkeyup = function(e) {
        e = e || window.event;
        var el = e.target || e.srcElement;
        if (el.className === 'in') {
            var bits = el.id.split('_');
            var to = document.getElementById('rate_' + bits[2] + '_' + bits[1] + '_' + bits[3]);
            if (to) {
                to.value = el.value;
            }        
        }
    }
    I don't know MooTools too but I checked their documentation and it also supports event delegation.

    http://mootools.net/docs/core/Elemen...ent.Delegation

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    @xelawho: Thank you for your suggestion. I will try it as soon as I get back to work, tomorrow.

    @glenngv: I don't think I've ever tried delegation, before, but your code is intriguing. Definitely compact! I'll also give that a shot, tomorrow.

    Unfortunately, although my current work location (changing this Wednesday) will allow me to read CF, I cannot log on to post. I will log on and report as soon as I can.

    Thank you!
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

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