Search code examples
javascriptphpjqueryunique

Jquery inside PHP loop with PHP values as ID

I'm using a Bootstrap multiselect plugin (https://davidstutz.github.io/bootstrap-multiselect/). The documentation says to call the plugin to the forms select id by the following:

$('#example').multiselect();

However my page is a timetable with multiple cells that are actually generated by a loop statement. Days (Mon-Sun) looped by how many units are in the database. Inside each box, is a separate form which works fine. Now i've wanted to add the multiselect plugin to add a select dropdown into the forms however I can't seem to call the plugin. I have a $i value that increases on each loop but this will only loop the amount of times a vehicle has been added (5 vehicles, 5 loops etc.). So if I have ms_ this will work, however only for the first column as thats where it stops being unique. I have another value of $thisdate which gives me the date the current cell is on. So technically I thought I should be able to have the following:

<?php
$currentlocation = $i . $thisdate;
?>
<script type="text/javascript">
    $('#ms-<?php echo ''.$currentlocation.''; ?>').multiselect();
</script>

This doesn't work. However the below does, but only for the first column.

<?php
 $currentlocation = $i;
?>
<script type="text/javascript">
  $('#ms-<?php echo ''.$currentlocation.''; ?>').multiselect();
</script>

Or this which works for the top column

<?php
 $currentlocation = $thisdate;
?>
<script type="text/javascript">
  $('#ms-<?php echo ''.$currentlocation.''; ?>').multiselect();
</script>

$i and $thisdate together would be the unique cell value.

enter image description here

EDIT: This was fixed by using $('.example').multiselect();

Solution

  • This code is working perfectly.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

<?php 
    for($i = 0; $i < 7; $i ++) { 
    $date=date("Y-m-d"); 
?>

<div class="">
    <strong>Select Language:</strong>
    <select id="ms-<?php echo $i?>-<?php echo $date; ?>" multiple="multiple">
        <option value="php">PHP</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="sql">SQL</option>
        <option value="jquery">Jquery</option>
        <option value=".net">.Net</option>
    </select>
  
</div>
<script>


$(document).ready(function() {  
var i = '<?php echo $i; ?>'; 
var current_date = '<?php echo (string) $date; ?>'; 
      $(`#ms-${i}-${current_date}`).multiselect({
          includeSelectAllOption: true,
        });
    });
</script>
<?php 
    }
?>