How do I build a "stoplight" state indicator button using jQuery?

Question

As my first jQuery project, I'm trying to write a "stoplight" status indicator that cycles through "off", "green", "yellow", and "red" circle images and POSTs the information so I can record it in a DB. I'm currently trying to use the toggle() function, and it works except that I have no way to "initialize" the value to the preexisting database state.

Here's what I have:

$('.stoplight').toggle(
    function () {
       $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: 'yellow' });
       $(this).attr('src', '/Images/Stoplights/yellowStatus.gif');
    },
    function () {
       $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: 'red' });
       $(this).attr('src', '/Images/Stoplights/redStatus.gif');
    },
    // ... and so forth for "off" and "green" settings

So - how do I set up the starting state of the toggle somehow during page load, or alternatively, is there another method by which I could implement this better?

Answer 1

Here's an alternative way of toggling through the various lights. I used divs instead of images, but the principle is the same. See it in action here: http://jsfiddle.net/vy7wX/3/

$('.stoplight').click(function() {
    var lights = ['off','green','yellow','red'];

    // find current status
    var status = $(this).attr('class').replace('stoplight ','');

    // get current position in array
    var position = $.inArray(status, lights);

    // get new position
    var position_new;

    // -1 because array index starts with 0
    if (position == lights.length-1) {
      // if it's at the end, go to the beginning
      position_new = 0;  
    } else {
      // else take the next status in the array
      position_new = position+1;
    }

    // get the new status, based on position
    var status_new = lights[position_new];

    // switch classes
    $(this).toggleClass(status+' '+status_new);
});​

In your case you can do two things: either check the current image src and retrieve the stoplight name or add a class to the image, so you can retrieve the name directly. The latter is probably easier.

Example:

<img class="stoplight red" src="/Images/Stoplights/redStatus.gif" alt="red light" />

And the JS for changing the image src and posting the status:

$('.stoplight').click(function() {
    var lights = ['off','green','yellow','red'];

    // find current status
    var status = $(this).attr('class').replace('stoplight ','');

    // get current position in array
    var position = $.inArray(status, lights);

    // get new position
    var position_new;

    // -1 because array index starts with 0
    if (position == lights.length-1) {
      // if it's at the end, go to the beginning
      position_new = 0;  
    } else {
      // else take the next status in the array
      position_new = position+1;
    }

    // get the new status, based on position
    var status_new = lights[position_new];

    // update image classnames and src
    $(this)
      .toggleClass(status+' '+status_new);
      .attr('src', '/Images/Stoplights/'+status_new+'Status.gif');

    // update database
    $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: status_new });
});​

Using this it doesn't matter what the start position of the light is, and you can simple add the correct class as starting position depending on the current status in the database.

Edit
As for jQuery 1.3.2. The documentation states that the .toggleClass method was added in 1.3 and it can toggle multiple classes at the same time. Elsewhere online I find that 1.3 can only handle one class though, so I assume the method itself was added in 1.3 but it got extended functionality in 1.4 which wasn't documented on that page.

Anyways, it's no problem. Like you said, you can simply toggle the two classes separately. But if you need to use the method twice you might use removeClass and addClass instead so the script reads better. I also forgot the class update in the last part, so the end will be something like this:

// update image classnames and src
$(this)
  .removeClass(status)
  .addClass(status_new)
  .attr('src', '/Images/Stoplights/'+status_new+'Status.gif');

// update database
$.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: status_new

Also, to cut back on lines of code the position_new variable can be defined as this:

// get new position
var position_new = position == lights.length-1 ? 0 : position+1;