Jquery function in while loop

Question

I'm new in Jquery and have to display multiple JQuery sliders in one page.

I have to display a slider every time a result comes from a MySQL requests.
I can display one slider, but can't display multiple sliders, because I can't change the name of the ID in javascript.
I'm also not able to call this function multiple times... Please help.

HTML page:

<?php
$reponse = $bdd->prepare('SELECT id FROM TABLE WHERE deleted = 0 ');               
$reponse->execute(); 

    $slider = array();
    $i = 0;

    while ($data = $reponse->fetch()) { 

          $slider[$i] = $data['id'];
          $i ++; ?>
          <div id="<?php echo "slider" . $data['id']; ?>"> </div> 
          <input type="text" id="<?php echo "amount" . $data['id']; ?>"> <?php
    } ?>

Javascript page:

$(function() {
 var name = "#slider1";
    $( name ).slider({
      value:100,
      min: 5,
      max: 300,
      step: 5,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value);
      }
    });
    $( "#amount" ).val( $( name ).slider( "value" ));
  });

//EDIT

Slider is joined with class to all elements, but I can't put the right value of the slidebar into amount.
I have several options to take the ID of current slider moving, but none of them work:

$(function() {
    $( ".slider" ).slider({
      value:100,
      min: 5,
      max: 300,
      step: 5,
      slide: function( event, ui ) {
        // check the event and ui variables to see what the exact reference you
        // your element is but it looks like it's ui.handle
        // console.log(ui);
        // console.log(ui.handle);
        var clicked_element = ui.handle.data('id');
        $( "#amount" + clicked_element ).val( ui.value);
      }
    });
    $( "#amount3" ).val( $( ".slider" ).slider( "value" ));
  });

What does the value of ui.handle.data('id') give you? Note that the last line of your code will not work, you need to loop over all .slider elements and put the correct value in the correct #amount box. — jeroen
– jeroen, Commented Oct 13, 2014 at 18:21
undefined is not a function, that's the only thing I can see. I know about the last line. Looping works, but trying to get the last ID in this loop — gr3g
– gr3g, Commented Oct 13, 2014 at 18:33
And what is the result of console.log(ui.handle);? Do you have a test-page online? — jeroen
– jeroen, Commented Oct 13, 2014 at 18:35
I see this line appearing everytime I move a mm f the slidebar: <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 33.8983050847458%;"></span> — gr3g
– gr3g, Commented Oct 13, 2014 at 18:37

HoangHieu · Accepted Answer · 2014-10-14 06:10:30Z

Here you can try this code :)

Html

<div id="slider1"></div> 
<div id="slider3"></div> 
<div id="slider4"></div> 
<div id="slider6"></div> 
<div id="slider8"></div>

jQuery.

for(var i = 0; i< count; i++){
    (function(i){
        var name = "#slider" + i;
       if($(name)){
        $( name ).slider({
            value:100,
            min: 5,
            max: 300,
            step: 5,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value);
            }
        });
       }
    })(i);
}

in code count is count of tag div id=slider+i

update

 <?php
$reponse = $bdd->prepare('SELECT id FROM TABLE WHERE deleted = 0 ');               
$reponse->execute();

$slider = array();
$i = 0;

while ($data = $reponse->fetch()) { 

      $slider[$i] = $data['id'];
      $i ++; ?>
      <div id="<?php echo "slider" . $data['id']; ?>"> </div> 
      <input type="text" id="<?php echo "amount" . $data['id']; ?>"> <?php
} 
echo "<script> var count = $i;</script>";
?>

I have added echo "<script> var count = $i;</script>"; this code had been declare val of count;

Problem is that I have : <div id="slider1"></div>, <div id="slider3"></div>, <div id="slider4"></div> Not ordered. + it don't seems that JQuery function can be in a loop...

jeroen · Accepted Answer · 2014-10-13 17:42:51Z

You should add a class to the elements that you want to attach the sliders to so that you can attach them to all at once:

<div id="<?php echo "slider" . $data['id']; ?>" class="my_slider"> </div>

And the javascript:

 // attach slider to all elements at once
 $('.my_slider').slider({
    value:100,
    ...

Then you have several options to get the right amount box:

You can get the next element in the DOM. The disadvantage is that this depends on the structure of the html. For example: $(this).next();
You can add a data attribute to get the correct ID and you can use that to target the correct amount;
You can wrap the combinations of sliders and amounts in a container element so that you can easily target the correct amount. This is a bit more flexible than the first option as the elements don't have to be next to each other.

Note that you will have to check if $(this) inside your inner function still contains a reference to the manipulated slider div. The documentation should clear that up.

Edit: Some more information about the second option:

html / php:

<div class="my_slider" data-id="<?php echo $data['id']; ?>"> </div>
<input type="text" id="<?php echo "amount" . $data['id']; ?>">

javascript:

      slide: function( event, ui ) {
        // check the event and ui variables to see what the exact reference you
        // your element is but it looks like it's ui.handle
        // console.log(ui);
        // console.log(ui.handle);
        var clicked_element = ui.handle.data('id');
        $( "#amount" + clicked_element ).val( ui.value);
      }

This seems much easier with a class! But I always need to put the value of the slider in the right amount div. Option 2 is the way I wan't to do it, but how to pass the id into the function?
@gr3g I have added a simple example but you would have to check how you can access the manipulated slider exactly. It looks like it is ui.handle.
When trying ui.handle I have undentified is not a function when moving the slider. With other tries I have the number in my javascript console...
@gr3g It sounds like your 99% there. If you are still stuck you should put the edited code and the results from the console below your original question.

gr3g · Accepted Answer · 2014-10-13 18:46:30Z

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /> 

        <link rel="stylesheet" href="../search/jquery-ui.structure.min.css">
        <link rel="stylesheet" href="../search/jquery-ui.theme.min.css">
        <link rel="stylesheet" href="Jqueryslider/jquery-ui.min.css">

    </head>
 <body> 
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="Jqueryslider/jquery-ui.min.js"></script>  
 <script type="text/javascript" src="myfile.js"> </script>

<?php

MYSQL QUERY

while(fetch)
{
<div id="<?php echo "slider" . $data['id']; ?>"> </div> 
<input type="text" id="<?php echo "amount" . $data['id']; ?>">

     <script type="text/javascript">
                initSlider("<?php echo $data['id'];?>");
     </script>
}

?>
 </body>
 </html

myfile.js

function initSlider(i){
        var name = "#slider"+i;
       if($(name)){
        $( name ).slider({
            value:100,
            min: 5,
            max: 300,
            step: 5,
            slide: function( event, ui ) {
                $( "#amount"+i ).val( ui.value);
            }
        });
       $( "#amount"+i ).val( $( "#slider" + i ).slider( "value" ));
       }
    }

Collectives™ on Stack Overflow

Jquery function in while loop

3 Answers 3

2 Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Related