range slider dynamic generation problem

range slider dynamic generation problem

Hi, I've posted this topic as a bug but an expert user encourages me to post it in the forum... here's the description of my problem:

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 corresponding 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)

  1.     <form id="form1" method="post" action="Default.aspx">
  2.         <input type="hidden" id="hdnNumAssets" value="3" />
  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" />
  4.         <table>
  5.             <tr>
  6.                 <td>
  7.                     <div ui="slider2x" id="lvOptimTable_ctrl0_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
  8.                     <br />
  9.                     <input type="text" id="lvOptimTable_ctrl0_lblSliderValue" />
  10.                 </td>
  11.             </tr>
  12.             <tr>
  13.                 <td>
  14.                     <div ui="slider2x" id="lvOptimTable_ctrl1_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
  15.                     <br />
  16.                     <input type="text" id="lvOptimTable_ctrl1_lblSliderValue" />
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td>
  21.                     <div ui="slider2x" id="lvOptimTable_ctrl2_lblSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
  22.                     <br />
  23.                     <input type="text" id="lvOptimTable_ctrl2_lblSliderValue" />
  24.                 </td>
  25.             </tr>
  26.         </table>
  27.     </form>
Here's the essential $(document).ready()...
  1. $(document).ready(function() {
  2.     var optimTableControls = $("#hdnOptimTableControls").val();
  3.     var numAssets = parseInt($("#hdnNumAssets").val());
  4.     var rows, controls;

  6.     rows = optimTableControls.split(";");
  7.     var sliderContainer, sliderTextbox;

  9.     $("div[ui=slider2x]").each(function(i) {
  10.         controls = rows[i].split(",");

  12.         //sliderContainer = "#" + controls[0];
  13.         sliderTextbox = "#" + controls[1];
  14.         $(this).slider({
  15.             range: true,
  16.             min: 0,
  17.             max: 100,
  18.             values: [0, 100],
  19.             slide: function(event, ui) {
  20.                 $(sliderTextbox).val(ui.values[0] + "% - " + ui.values[1] + "%");
  21.             }
  22.         });
  23.         $(sliderTextbox).val($(this).slider("values", 0) + "% - " + $(this).slider("values", 1) + "%");

  25.         // elements style...
  26.     });
  27. });
As I said, the expert encourage me to learn about loops and closures and noq, I have the essentials concepts but I can't find the correct way to solve my problem... I was trying so hard without success. Please, anyone could help me?

Thanks in advance
Acum

PS: the URL ticket I've reported is this:  http://bugs.jqueryui.com/ticket/8483 as you could see, there are changes in $(document).ready