JQuery Buttons and Sliders not working when created in loop

Question

Can anyone provide insight into why the slider amounts aren't updating and the button icons do not change when created through a loop? If I go through and create each slider and variable named outside of a look it works fine. Not sure why it is not working.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {

    var locked = [];
    var slider = [];
    var i;
    for (i = 0; i < 5; i++) {
        $( "#slider" + i ).slider({
              range: "max",
              min: 0,
              max: 100,
              step: 0.01,
              value: 20,
              slide: function( event, ui ) {
                $( "#amount" + i ).val( ui.value );
              }
            });
            $( "#amount" + i ).val( $( "#slider-range-max" ).slider( "value" ) );
            $( "#amount" + i ).val(20.00);

            locked[i] = false;

            $("#Lock" + i).button({ 
                icons: {primary:'ui-icon-locked'},
                text: false 
                    }).click(function( event ) {

                        if(locked[i] == false){
                            $(this).button("option", { 
                                icons: { primary: 'ui-icon-unlocked'  }
                            });

                            locked[i] = true;

                        } else if(locked[i] == true){ 
                            $(this).button("option", { 
                                icons: { primary: 'ui-icon-locked'  }
                            });

                            locked[i] = false;
                        }
                    });
    }
  });
  </script>
</head>
<body>

    <table border='0' style="width:500px;">
        <tr><td style="width:75px;">Var 1</td><td style="width:350px;"><div id="slider0"></div></td><td style="width:30px;"><input type="text" id="amount0" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock0'></td></tr>
        <tr><td style="width:75px;">Var 2</td><td style="width:350px;"><div id="slider1"></div></td><td style="width:30px;"><input type="text" id="amount1" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock1'></td></tr>
        <tr><td style="width:75px;">Var 3</td><td style="width:350px;"><div id="slider2"></div></td><td style="width:30px;"><input type="text" id="amount2" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock2'></td></tr>
        <tr><td style="width:75px;">Var 4</td><td style="width:350px;"><div id="slider3"></div></td><td style="width:30px;"><input type="text" id="amount3" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock3'></td></tr>
        <tr><td style="width:75px;">Var 5</td><td style="width:350px;"><div id="slider4"></div></td><td style="width:30px;"><input type="text" id="amount4" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock4'></td></tr>
    </table>



</body>
</html>

Thanks!

Very likely a duplicate of http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — yvesmancera, Aug 07 '15 at 17:01
great. let me post this as a solution. please upvote it and mark it as an answer. — Sushil, Aug 07 '15 at 17:15
@K.Ovitt i've posted my solution. please mark it as an answer if it helped you. — Sushil, Aug 07 '15 at 17:19

score 0 · Accepted Answer · answered Aug 07 '15 at 17:19

what you can do is give your slider div's a data-id attribute which you can use in the slide event to update the input values.

you can do the same for the buttons.

here's the html

<table border='0' style="width:500px;">
    <tr>
        <td style="width:75px;">Var 1</td>
        <td style="width:350px;">
            <div id="slider0" data-id='0'></div>
        </td>
        <td style="width:30px;">
            <input type="text" id="amount0" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
        </td>
        <td>
            <button id='Lock0' data-buttonid='0'>
        </td>
    </tr>
    <tr>
        <td style="width:75px;">Var 2</td>
        <td style="width:350px;">
            <div id="slider1" data-id='1'></div>
        </td>
        <td style="width:30px;">
            <input type="text" id="amount1" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
        </td>
        <td>
            <button id='Lock1' data-buttonid='1'>
        </td>
    </tr>
    <tr>
        <td style="width:75px;">Var 3</td>
        <td style="width:350px;">
            <div id="slider2" data-id='2'></div>
        </td>
        <td style="width:30px;">
            <input type="text" id="amount2" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
        </td>
        <td>
            <button id='Lock2' data-buttonid='2'>
        </td>
    </tr>
    <tr>
        <td style="width:75px;">Var 4</td>
        <td style="width:350px;">
            <div id="slider3" data-id='3'></div>
        </td>
        <td style="width:30px;">
            <input type="text" id="amount3" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
        </td>
        <td>
            <button id='Lock3' data-buttonid='3'>
        </td>
    </tr>
    <tr>
        <td style="width:75px;">Var 5</td>
        <td style="width:350px;">
            <div id="slider4" data-id='4'></div>
        </td>
        <td style="width:30px;">
            <input type="text" id="amount4" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
        </td>
        <td>
            <button id='Lock4' data-buttonid='4'>
        </td>
    </tr>
</table>

notice the data-id and the data-buttonid attributes

then just update your js to read the data attribute and update your input values

here's the JS

$(function() {

    var locked = [];
    var slider = [];
    var i;
    for (i = 0; i < 5; i++) {
        $("#slider" + i).slider({
            range: "max",
            min: 0,
            max: 100,
            step: 0.01,
            value: 20,
            slide: function(event, ui) {
                var id = $(this).data('id');

                $("#amount" + id).val(ui.value);

            }
        });
        $("#amount" + i).val($("#slider-range-max").slider("value"));
        $("#amount" + i).val(20.00);

        locked[i] = false;

        $("#Lock" + i).button({
            icons: {
                primary: 'ui-icon-locked'
            },
            text: false
        }).click(function(event) {
            var id = $(this).data('buttonid');

            console.log($(this));
            if (locked[id] == false) {
                $(this).button("option", {
                    icons: {
                        primary: 'ui-icon-unlocked'
                    }
                });

                locked[id] = true;

            } else if (locked[id] == true) {
                $(this).button("option", {
                    icons: {
                        primary: 'ui-icon-locked'
                    }
                });

                locked[id] = false;
            }
        });
    }
});

you can check this working JSFIDDLE. hope this helps.

JQuery Buttons and Sliders not working when created in loop

1 Answers1