Question

I’m having a rather mind-boggling problem with some JS I’m working on for a web app. Unfortunately, I can’t post the full code for this, as it’s part of a not-yet-released project. This issue has both me and some colleagues I asked stumped – from what I can tell, it should work.

Now, to the actual problem: a user enters some info into some form fields and clicks a “confirm” image, whereupon an AJAX request is sent back to the server. The server does some processing, then sends back a response with a status and some attached data. A status message is displayed in the modal dialogue window the user was using, and an icon with a link is displayed. Here’s the “onComplete” Handler for the Mootools Request.JSON object, with some error condition handling removed:

  onComplete: function(response) {
    if (response) {
      if (response.status == 0) {
        // this means the request was successful
        licenses = response.licenses;
        updateControls();
        licenseList();
        // here I add the status message...
        $("createform_result").innerHTML = "<img src=\'/media/com_supportarea/images/db_success.png\' /> License created. Download:<br /><br />";
        // ...and the download "link"
        if (response.tlsid) {
          $("createform_result").innerHTML += "<a href=\"#\" id=\"newtlslic-"+response.tlsid+"\"><img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>";
          // this line is here for debugging only, to make sure this
          // block of code is run (it is) and the element is found (it is)
          $("newtlslic-"+response.tlsid).style.border = "1px solid red";
          $("newtlslic-"+response.tlsid).addEvent("click", function(e) {
            // I've stripped out all other code, also for debugging
            e.stop();
          });
        }
      }
    }
  }

The message and icon with link appears, the style is applied (red border appears) and no error message appears in either Firefox or Chrome. However, clicking the icon results in a # being appended to the URL (the e.stop()) does nothing). According to the EventBug plugin, no click event is attached to the link. It seems like .addEvent() simply does nothing here.

Now, and here’s they prize question: why is this and how can I fix it? Help!

Answer 1

strings in javascript are immutable. when you do stuff like:

$("createform_result").innerHTML += "<a href=\"#\" id=\"newtlslic-"+response.tlsid+"\"><img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>";

you are referencing the innerHTML as a string. what this does is, it fetches the property into a string, concatenates it to the other strings you pass on and then returns a new string in the end, which gets set as the innerHTML.

in doing so, you are OVERWRITING the contents of the element every time, for every iteration.

events attached to elements are not done by a generic ID handler – they rely on the element being in the DOM, then the element UID (an internal property mootools assigns to all passed elements) is being read and the event callback is added into the element storage behind that UID.

you can see this work by doing console.log(element.retrieve("events"));

if you rewrite the innerHTML, the inner element is re-created and gets a NEW UID, which means the callback now points to an empty pointer as the UID is the key in element storage.

I may be wrong about what you are doing here as I don’t actually see the bit where you rewrite it again, but there probably is one in the code you stripped, especially if you are running a loop.

the best way to deal with this is something else – use Event Delegation.

it can allow you to add the click event to the parent element instead via some selector. this will work for ANY element added in any way at any time that matches.

eg.

// add this once, outside the loop 
$("createform_result").addEvent("click:relay(a.editLink)", function(event, element) {
    console.log(this === element); 
    console.log(this === event.target);
    console.log(this.get("data-id"));
}); 

// then as you loop the results, just inject the els or use innerHTML or whatever...
new Element("a.editLink", {
    html: '<img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>',
    "data-id": response.tlsid
}).inject($("createform_result"));

Event delegation is now a part of mootools core in 1.4.0 or is in mootools-more in previous versions.

have fun!