CODEWITHSUNDEEP
javascriptphpjqueryjquery-select2
Wel
Wel

Reputation: 201

Select2 plugin won't work properly inside while php loop

I've been trying to get select2 plugin to work, which worked fine on another pages, but when i tried to run it inside a while only gave me some headeches because it only worked on the last row.

Here's my code "minimized":

<?php
include("setting.php");
$pdosys=conectsys();
@session_start ();
?>

<html>
    <head>
        <title>Test Error Select2</title>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    </head>
    <body>
        <h1>While</h1>
        <?php
        $searchid=$pdosys->prepare("SELECT * FROM tableclients WHERE id > 0");
        $searchid->execute();
        while($line=$searchid->fetch(PDO::FETCH_ASSOC)){
            ?>
            <a style="cursor:pointer;" data-toggle="modal" data-target="#myModal<?=$line[id]?>"><i class="material-icons">mode_edit</i></a><!-- Troggles modal -->
            <?php
            echo $line[id];
            echo "<br>";
            Modal($line[id]);//calls the function with modal but it only appears when the edit button is clicked
        }
        ?>
        <h1>End of while</h1>
    </body>
</html>

<?php
    function Modal($id) {//function with modal content that's determined by $id
        include_once("setting.php");
        $pdomodal=conectsys();
        ?>
        <div id="myModal<?=$id?>" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button style="opacity: 1;" type="button" class="close" data-dismiss="modal"><i style="color:red;" class="material-icons">close</i></button>
                        <h4 class="modal-title">Edit</h4>
                    </div>
                    <div class="modal-body">
                        <script>//script that troggles select2
                            $(document).ready(function() {
                            $('.<?=$id?>').select2();
                            });
                        </script>
                        <!-- Select that select2 only work on the last row (the content still works on every row)-->
                        <select id="list1"  class="<?=$id?>">
                            <option value="">Choose the location</option>
                            <?php
                            $searchclients=$pdomodal->prepare("SELECT * FROM tableclients WHERE name = robert");
                            $searchclients->execute();
                            while($clients=$searchclients->fetch(PDO::FETCH_ASSOC)){
                                echo "<option value=".$clients["adress"].">".$clients["adress"]."</option>";
                            }
                            ?>
                        </select>
                        <br>
                    </div>
                </div>
            </div>
        </div>
<?php
    }
?>

The $id makes the modal variable so i could get multiple contents when i call it inside the while loop, i tried to use the same logic to select2 which i'm getting the value from select class, but only the last row got to work when i execute that code, probably there's some problem with the <script> that i'm trying to use (just copied the example from the official site), anny idea on how to implement it?

Obs: I've checked the source code and every value is receiving the right value, so i'm really sure that the problem is on the way i'm calling select2.

Upvotes: 1

Views: 1952

Answers (2)

Wel
Wel

Reputation: 201

Problem solved, like i've thinked the problem was on the select2 function call, when i've tried this:

 $(document).ready(function() {
     $('.<?=$id?>').select2();
 });

It generates all the select2 onload with the last value from the loop, so to fix that i just created a new function with a varying name (using the $id) and attached it to a onclick event on my code. So the final result got something like that:

html

<input type='radio' required value="locate" onclick="select2<?=$id?>();">
<select id="list1"  class="<?=$id?>">
    <option>Test Location 1</option>
    <option>Test Location 2</option>
<select>

JS

function select2<?=$id?>(){
    $('.<?=$id?>').select2();
}

My js skills are really poor, so probably there's a way better solution to call it, but in my case it's fine.

Upvotes: 1

Richard Tyler Miles
Richard Tyler Miles

Reputation: 683

It maybe because you need to move the script tag after the id it is refrencing. Thats just a guess though. Select two is tricky. jQuery will recursively run through each item matching its selector so you could just try making all the ids the same and calling the function at the bottom of the page. It is entirely prefrence, as code is code, but I would also reccomend looking into Mustache Templating. It's one extra layer of abstration which may help in these situations.

Upvotes: 0

Related Questions