error in range slider dynamic creation

[acum10]

Hi, Inside an ASP.NET page, after some requests and responses I need to generate jquery UI range sliders dynamically. I've got to create the sliders (there are many sliders as dynamically generated table rows) but, when you drag each one, the changes only are viewed in the last textbox slider, not in the previous slider's textbox. The jquery version is 1.7.1 and jquery ui version is 1.8.18 This is the essential HTML (it's a summary of ASP.NET generated code)

<input type="hidden" id="hdnNumAssets" value="3" />
<input type="hidden" id="hdnOptimTableControls" value="lvOptimTable_ctrl0_lblSlider,lvOptimTable_ctrl0_lblSliderValue;lvOptimTable_ctrl1_lblSlider,lvOptimTable_ctrl1_lblSliderValue;lvOptimTable_ctrl2_lblSlider,lvOptimTable_ctrl2_lblSliderValue;" />
<table>
    <tr>
        <td>
            <div id="lvOptimTable_ctrl0_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
            <br />
            <input type="text" id="lvOptimTable_ctrl0_lblSliderValue" />
        </td>
    </tr>
    <tr>
        <td>
            <div id="lvOptimTable_ctrl1_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
            <br />
            <input type="text" id="lvOptimTable_ctrl1_lblSliderValue" />
        </td>
    </tr>
    <tr>
        <td>
            <div id="lvOptimTable_ctrl2_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
            <br />
            <input type="text" id="lvOptimTable_ctrl2_lblSliderValue" />
        </td>
    </tr>
</table>

Here's the essential $(document).ready()...

$(document).ready(function() {
    var optimTableControls = $("#hdnOptimTableControls").val();
    var numAssets = parseInt($("#hdnNumAssets").val());
    var rows, controls;

    rows = optimTableControls.split(";");
    var sliderContainer, sliderTextbox;
    
    for (var i = 0; i < numAssets; i++) {
        controls = rows[i].split(",");

        sliderContainer = "#" + controls[0];
        sliderTextbox = "#" + controls[1];
        
        $(sliderContainer).slider({
            range: true,
            min: 0,
            max: 100,
            values: [0, 100],
            slide: function(event, ui) {
                $(sliderTextbox).val(ui.values[0] + "% - " + ui.values[1] + "%");
            }
        });
        $(sliderTextbox).val($(sliderContainer).slider("values", 0) + "% - " + $(sliderContainer).slider("values", 1) + "%");
        // other code about styles
    }
});

When I test with the same data but not using any bucle, the sliders (and its textboxes) go super well. The problem comes when the application exit the bucle. Thanks in advance for your help. Acum

[Scott González]

You need to learn about closures and loops. Please use the forums or StackOverflow for help.