jQuery sliders in PHP foreach issue - php

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.