Opened 6 years ago

Closed 6 years ago

#8483 closed bug (notabug)

error in range slider dynamic creation

Reported by: acum10 Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.slider Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

Description

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

Change History (1)

comment:1 Changed 6 years ago by Scott González

Component: ui.coreui.slider
Resolution: invalid
Status: newclosed

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

Note: See TracTickets for help on using tickets.