jQuery UI - Multiple Dynamically Generated Sliders and Functions on change for each

Question

I'm using jQuery and jQuery UI to dynamically build sliders based on a user configured number. However I am having trouble in that when I create the sliders it seems that it makes all of them into whatever the last one that was made was. For instance I have eight sliders and each one, when it is slid, changes the value of a corresponding text area to whatever I need it to be. Right now however all of the sliders change the eighth text area instead of their corresponding one.

Code:

function buildSliders() {

 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(b);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 document.getElementById(targetChannel).innerHTML = "blue";
}

I'm pretty sure there is a way around this, and I've looked into things like .clone and .each however they are unfamiliar concepts to me and I don't know how or if they would work. As you can see the functions are when the slide value has been changed are all pretty similar, they only have to change the target.

Any help would be appreaciated, thanks.

**EDIT

Here's the code I used to solve this:

function buildSliders() {

 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(this.attributes["value"].value);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 $( "#"+targetChannel ).text($( "#slider"+dimmerChannel ).slider( "value" ) )
}

When I crate the divs:

for(r = 0; r < bankCount; r ++)
{
    var trTag = document.createElement("tr");
 tableTag.appendChild(trTag);
 var sliderLabelTag = document.createElement("td");
 sliderLabelTag.className = "RelayLabel";
 sliderLabelTag.colSpan= 2;
 sliderLabelTag.innerHTML = relayNames[r] + ": Slider Value";
 trTag.appendChild(sliderLabelTag);

 var sliderValueTag = document.createElement("td");
 sliderValueTag.id = "sliderValue" + r;
 sliderValueTag.innerHTML = "Waiting to Query";
 trTag.appendChild(sliderValueTag);

    var trTag = document.createElement("tr");
 tableTag.appendChild(trTag);
 var sliderCell = document.createElement("td");
 sliderCell.id = "Slider" + r;
 sliderCell.className = "sliderCell";
 sliderCell.colSpan = 3;
 sliderCell.innerHTML = "<div id=\"slider" + r + "\" value=\"" + r + "\" class=\"" + r + "\" name=\"" + r + "\"></div>";
 trTag.appendChild(sliderCell);
}

Answer 1

It seems that the slider object is not properly bound. Something like the following might do..

function buildSliders(divName) {
   //divName - container for the sliders
        $(divName).each(function() {
            $(this).empty().slider({

Answer 2

As I recall, there is an issue when passing a variable from a for loop to a callback. Just above your .slider line, try adding

var c = b;

and then in your callback do

sendDimCommand(c);

I've run into similar issues when using jQuery.each and was able to get around the problem by doing $that = $(this); and then using $that in callbacks to refer to the jQuery object. I'm thinking a similar approach might help you here.