PHP中的jQuery滑块foreach问题

Question

I have a javascript problem, and I tried different solutions but I don't know how to resolve this issue right know, so, i'm asking you some help !

The aim of this code, is to present on a view, as much jQuery sliders as there are users. I am using this jQuery slider : http://jqueryui.com/slider/#rangemax

In my example, I have 6 users, the problem is that the JS doesn't enable to update the 'dailyAmount' input for each user when I moove the handle of the slider. It works only for the last user, I assume that the JS code that remain active on the page is the one corresponding to the last iteration only..

Here is the code, I'm looking for a solution for days now, but I didn't find any discussion about that on the different communities.

I have this code (simplified to expose you the issue) :

Start of the php code

<?php
$ii = 0;
foreach($userList as $user){
     $threshold = $user->getCurrentThreshold();
     $dailyThreshold = $threshold->getDailyThreshold();
     $dailySlider = "dailySlider".$ii;
     $dailyAmount = "dailyAmount".$ii;
     $weeklyAmountId = "weeklyAmount".$ii;
?>

Javascript code to get the dynamic id for each iteration

<script type="text/javascript">
                var sliderId = '#dailySlider'+<?php echo $ii; ?>;
                var dailyAmount = '#dailyAmount'+<?php echo $ii; ?>;
                 $(function() {
                     $(sliderId).slider({
                         range: "max",
                         min: 1,
                         max: 4,
                         value: <?php echo $dailyThreshold ?>,
                         slide: function( event, ui ) {
                            // alert(sliderId);
                            $(dailyAmount).val( ui.value );
                         }
                     });
                     $(dailyAmount).val( $(sliderId).slider( "value" ) );
                });
</script>

HTML code

<div class="threshold">
     <form>
          <fieldset>
               <input type="text" id=<?php echo $dailyAmount ?>>
               <div id=<?php echo $dailySlider ?>></div>
          </fieldset>
    </form>
</div>

End of the PHP code, to increment $ii and close the foreach iteration

<?php>
$ii++;
}
?>

How can I have an active JS code to make the 'dailyAmount' in-real-time-updated by the slider when we moove the handle for each user ?

Thanx in advance for your suggestions !

Answer 1

Try something like this.

<?php
ini_set('display_errors', true);
error_reporting(E_ALL);
// you should have error reporting on.

// get $userList as usual...

$ii = 0; // funiest increment var i've seen. Also why don't you use the actual $user ID if you have it.
foreach($userList as $user) {
     $threshold = $user->getCurrentThreshold();
     $dailyThreshold = $threshold->getDailyThreshold();
     $dailySlider = "dailySlider".$ii;
     $dailyAmount = "dailyAmount".$ii;
     $weeklyAmountId = "weeklyAmount".$ii;

// using a data attribute for this made sense, and helps clean up the javascript.
?>
<div class="threshold" data-uid="<?php echo $ii; ?>">
     <form> <!-- i personally wouldn't put that many forms on the page, and do it with one but obviously I don't know what requirements you have -->
          <fieldset>
               <input class="amount" type="text" id="<?php echo $dailyAmount;?>">
               <div class="slider" id="<?php echo $dailySlider; ?>"></div>
          </fieldset>
    </form>
</div>
<?php
    $ii++;
}

?>

Outside the loop..

<script type="text/javascript">
$(function(){
    $('.threshold[data-uid]').each(function(index){
        var uid = $(this).attr('data-uid');
        var sliderId = '#dailySlider'+uid;
        var dailyAmount = '#dailyAmount'+uid;
             $(sliderId).slider({
                 range: "max",
                 min: 1,
                 max: 4,
                 value: <?php echo $dailyThreshold ?>,
                 slide: function( event, ui ) {
                    // alert(sliderId);
                    $(dailyAmount).val( ui.value );
                 }
             });
             $(dailyAmount).val( $(sliderId).slider( "value" ) );       
    });
});


</script>

I haven't tested it, but it should make sense.