Skip to main content

Referencing Local Variables in jQuery Callback Functions

One day I was working on a CRUD application, which contains a lot of form fields and controls. Each of them requires a mouse over event handler to display a tooltip message. After lots of copy’n’pasting, I decided to refactor the repetitive event registration code out and put them into a loop.

To test out my idea, I developed a very simple page with just three <div>s:

<div id="div1">Click me</div>
<div id="div2">Click me</div>
<div id="div3">Click me</div>

and a list of messages indexed by the <div>s’ ID:

var messages = new Object();
messages['div0'] = 'hello'; 
messages['div1'] = 'bonjour'; 
messages['div2'] = 'ciao';

When someone click on one of the <div>’s region, I would like to show a popup an dialog and display the message associated with it’s ID. Since my goal was to eliminate repetitive lines of code, I put the event registration code in a loop:

for(var i=0; i<3; ++i) {
  $("#div" + i).click(function() { 
    alert(messages['div' + i]); 
  });
}

When I tried this out, instead of showing the right message, the alert box always shows ‘undefined’:

image

After a lot of head scratching, I finally realised that the problem is with this line of code referencing the loop variable i:

alert(messages['div' + i]);

The computer scientists’ way of describing this is that it formed a “Closure” referencing the variable i. Since this line of code sits inside the callback function,  the ‘div’ + i statement wasn’t evaluated to ‘div0’, ‘div1’ and ‘div2’ in each loop iteration as I expected. Instead, because each of the callback function holds a reference to the variable i, the ‘div’ + i statement was using the final value of i, which is 3 in this case.

This can be proven by changing the alert statement to show the value of i, which will always be 3 when any of the <div>s is clicked.

alert(i);

I Googled around for solutions but most of them are pretty complicated but eventually I found an answer in the jQuery reference document. All jQuery objects have a data() method, which allows you to bind any data to it. The bound data will be instance specific and the value will be evaluated at the binding time.

Therefore, to fix my code I just have to change the event registration code to:

for(var i=0; i<3; ++i) {
  $('#div' + i).data('divID', 'div' + i);
  $('#div' + i).click(function() {
    alert(messages[$(this).data('divID')]); 
  });
}

So in each iteration of the loop, the value ‘div0’, ‘div1’ and ‘div2’ are stored into the ‘divID’ data section of the respective <div> objects and then the callback function uses the stored value to find out which message to display when they are clicked.

The final solution looks like this:

$(function() {
  var messages = new Object();
  messages['div0'] = 'hello'; 
  messages['div1'] = 'bonjour'; 
  messages['div2'] = 'ciao';
         
  for(var i=0; i<3; ++i) {
    $('#div' + i).data('divID', 'div' + i);
    $('#div' + i).click(function() { 
      alert(messages[$(this).data('divID')]); 
    });
  }      
});

Comments

  1. Thanks, this helped me figure out why my callbacks weren't working.

    ReplyDelete
  2. Thank you very much! Nice solution and not complicated at all.

    ReplyDelete
  3. This not the first time when I face the problem, but this is the best solution that I found so far.
    Thanks a lot!

    ReplyDelete

Post a Comment

Popular posts from this blog

Load Testing ASP.NET Sites with JMeter

Following my previous post about using JMeter to test MOSS, I tried to figure out what are the bare minimum requirements of using JMeter against a plain ASP.NET website. I wrote a very simple ASP.NET web application with just a button, a text fields and a static label. This application displays the content of a text file in the static label when it loads and write content of the text field back to the file when the button is clicked.I found all I need to do in order to script this using JMeter is to extract __VIEWSTATE and __EVENTVALIDATION fields then send them back in the update request. My JMeter test plain looks like this:

Load Testing SharePoint (MOSS) Sites with JMeter

I have used JMeter for load testing few non-ASP.NET web sites before, however I could not get it to work with ASP.NET web sites. This is mainly due to ASP.NET ViewState and event validations, which stops a recorded JMeter script from being played back.Recently I worked on a MOSS project and we were looking for tools to perform load testing on the server. Many people said the load testing tool in Microsoft Team System for Testers works well with MOSS. However, it is quite expensive so I decided to give JMeter another go. After several hours of hacking, I actually got it to work and here’s how I did it.My test page is the pretty standard MOSS edit document property screen with few extra text fields added and the goal here is to use a JMeter script to change the document properties. Once I have a working script, I can configure JMeter to fire hundreds of instances of this script simultaneously to simulate the user workload.As shown in the screenshot below, the test plan contains two HTTP…

Coromandel Trip - Xmas 2019

Few weeks ago, my son watched a Youtube video about hot water beach and was really excited when I told him it is in New Zealand so we decided to take an impromptu trip there before Xmas.Hot water beach is actually only around 2.5 hours drive from Auckland but the wife didn't want to sit in the car for 5 hours in the same day. Fortunately we managed to find a nice holiday apartment in Whitianga despite busy holiday season, which is a nice small beach-side town only 30 minutes away from the hot water beach.Kids @ Whitianga beachDay 1Hot water beachThe best time to dig your own hot spa at the hot water beach is one hour on either side of the low tide, which was around 10:15am on the day. We decided to leave early and drove there first thing in the morning. We managed to get there by 10:45am but the beach was already packed with visitors.We tried to find an empty spot and started digging with our big garden spade (most people were using mini toy-like ones) but only cold water came out…