Topic: Modal not populating with PHP data.

Lars7 pro asked 5 years ago


Hi Guys, I have been been trying to open a modal populated with data but I can't get both elements to work together. Here is my code: <td><a class="teal-text" href="admin.php?users&user_id=<?php echo $user_id; ?>" data-toggle="modal" data-target="#basicExample"><i class="fa fa-times"></i></a></td> The code will open the modal but without the data as the url dosen't get the user_id but if I remove "data-toggle="modal" data-target="#basicExample" " the url gets the user_id and I can open the modal from another button. I have tried various versions of this but nothing has worked so far. Can anyone help with this? Thanks Tom

Lars7 pro answered 5 years ago


Hi Rafal, That was it :) Who knew my php was out of date! Here is the completed code for anyone who needs it: index.php
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">
    
    <!-- Your custom styles (optional) -->
    <link href="/mdb_gallery/public/css/style.css" rel="stylesheet">

</head>
<body>

<?php  
$conn = new mysqli('localhost', 'root', "", 'gallery');
$sql = "SELECT * FROM tbl_employee";
$result = $conn->query($sql)  or trigger_error($conn->error."[$sql]");
 ?>  
 
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>  
                <br />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Employee Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php 
                            while($row = $result->fetch_array(MYSQLI_ASSOC))
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["name"]; ?></td>  
                               <td><button name=”view” value=”view” id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs 
                               view_data">view</button></td>
                               
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  

 <div id="dataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>

 <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>
 
</body>

</html>
select.php
<?php  
 if(isset($_POST["employee_id"]))  
 {  
$output = '';    
$conn = new mysqli('localhost', 'root', "", 'gallery');
$sql = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = $conn->query($sql) or trigger_error($conn->error.”[$sql]”);
$output .= ' <div class="table-responsive"> <table class="table table-bordered">'; while($row = $result->fetch_array(MYSQLI_ASSOC)) { $output .= ' <tr> <td width="30%"><label>Name</label></td> <td width="70%">'.$row["name"].'</td> </tr> <tr> <td width="30%"><label>Address</label></td> <td width="70%">'.$row["address"].'</td> </tr> <tr> <td width="30%"><label>Gender</label></td> <td width="70%">'.$row["gender"].'</td> </tr> <tr> <td width="30%"><label>Designation</label></td> <td width="70%">'.$row["designation"].'</td> </tr> <tr> <td width="30%"><label>Age</label></td> <td width="70%">'.$row["age"].' Year</td> </tr> '; } $output .= "</table></div>"; echo $output; } ?>` Once again thank you. I appreciate all your help :)

Rafał Rogulski free answered 5 years ago


Hi Tom, I figure out, it's probably because you use outdated function mysql.
$result = query("SELECT * FROM tbl_employee");
confirm($result);
change:
$conn = new mysqli(addres, user, password, database);
$sql = "SELECT * FROM tbl_employee";
$result = $conn->query($sql)  or trigger_error($conn->error."[$sql]");
this: while($row = fetch_array($result)) to this: while($row = $result->fetch_array(MYSQLI_ASSOC)) <input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /> to: <button name="view" value="view" id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs view_data">view</button> and in select.php `$result = query("SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'"); confirm($result);` to: `$conn = new mysqli(localhost, user, password, database); $sql = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'"; $result = $conn->query($sql) or trigger_error($conn->error."[$sql]");` while($row = fetch_array($result)) to while($row = $result->fetch_array(MYSQLI_ASSOC)) If you will heve more problems please send me all files on mail r.rogulski@mdbootstrap.com (if you can of course). Then I will have this same problem what you, then it's easier to figure out what is wrong. Regards

Lars7 pro answered 5 years ago


Hi Rafal, I tried to replace all the css and js link with your but the model appears without the data.
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">
    
    <!-- Your custom styles (optional) -->
    <link href="/mdb_gallery/public/css/style.css" rel="stylesheet">

</head>

<body>

   
   <?php  
    
$result = query("SELECT * FROM tbl_employee");
confirm($result);  
 ?>  
 
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>  
                <br />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Employee Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php 
                            while($row = fetch_array($result))
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["name"]; ?></td>  
                               <td><input type="button" name="view" value="view" id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs view_data" /></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  

 <div id="dataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>

 <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>
 
</body>

</html> 

Rafał Rogulski free answered 5 years ago


Hi Tom, Style of MDBooststrap are overwritten by this lines: `<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> ` Remove them. At the bottom move this scripts:
<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>
before </body>, and one more thing don't use quotation marks inside quotation marks: <input type="button" name="view" value="view" id="<?php echo $row["id"]?>" class="btn btn-info btn-xs view_data" /> this should look <input type="button" name="view" value="view" id="<?php echo $row['id']?>" class="btn btn-info btn-xs view_data" /> Regards

Lars7 pro answered 5 years ago


cont: and on the select.php page:
<?php  
 if(isset($_POST["employee_id"]))  
 {  
      $output = '';  
     $result = query("SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'");
     confirm($result);
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($row = fetch_array($result))
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>Name</label></td>  
                     <td width="70%">'.$row["name"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Address</label></td>  
                     <td width="70%">'.$row["address"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Gender</label></td>  
                     <td width="70%">'.$row["gender"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Designation</label></td>  
                     <td width="70%">'.$row["designation"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Age</label></td>  
                     <td width="70%">'.$row["age"].' Year</td>  
                </tr>  
                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
 }  
 ?>

Lars7 pro answered 5 years ago


Hi Rafal, I followed the link you left for me (thank you) and I eventually found my way to here: I got it to work (very nice) but only if I used the stlye sheets and js scripts that came with it. I had to rem out the mdbootstrap ones which means I will loose out on your nice styling :( It there any way to get the benefit of both?

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
<!--    <link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- Material Design Bootstrap -->
<!--    <link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">-->
    
    <!-- Your custom styles (optional) -->
    <link href="/mdb_gallery/public/css/style.css" rel="stylesheet">

           <title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</head>

<body>

   
   <?php  
    
$result = query("SELECT * FROM tbl_employee");
confirm($result);  
 ?>  
 
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>  
                <br />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Employee Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php 
                            while($row = fetch_array($result))
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["name"]; ?></td>  
                               <td><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  

<!--
 <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
-->
 <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 
 
 
 <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>

    <!--/.Mask-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    
<!--    <script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>-->

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
<!--    <script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>-->

    <!-- MDB core JavaScript -->
<!--    <script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>-->

</body>

</html>

Rafał Rogulski free answered 5 years ago


Hi Tom, You have some page to edit users record (admin.php?users&user_id=<?php echo $user_id; ?>), and we will use them. In links to edit or delet user porfile add new attribiute and bind them with user_id and add some class: <a class="teal-text showmodal" data-userid="<?php echo $user_id; ?>" data-toggle="modal" data-target="#basicExample"></a> In modal <div class="modal-body"> add id <div id="#usermanagment " class="modal-body"> And now is time for jQuery:
<script>
       $(document).ready(function() {
            $(document).on('click', '.showmodal', function() {
                var userid = $(this).data('userid');
                $("#usermanagment").html('<iframe src="admin.php?users&user_id='+userid+'"></iframe>');
            });
        });
</script>
When you click on link wich have class showmodal, script will take data from your attribute data-userid from clicked link, and add iframe with your page. In your way, you must generate modals for all users in PHP, or use AJAX, on this` link you can find how to do this. Regards,

Lars7 pro answered 5 years ago


Hi Rafal, What I hope to achieve is to have a modal open and populate a form so that the data fields can be edited. I have moved the code since my first post so it looks a little different but does the same thing The edit button is in a table that is brought through from my functions file:
$user = <<<DELIMETER

        <tr>
            <th scope="row">{$user_id}</th>
            <td>{$username}</td>
            <td>{$email}</td>
            <td>{$password}</td>   
            <td>{$userrole}</td>
            <td><a class="red-text" href="admin.php?delete_user_id={$user_id}"><i class="fa fa-times"></a></td>
            <td><a class="teal-text" data-user_id="{$user_id}"  data-toggle="modal" data-target="#basicExample"><i class="fa fa-pencil"></i></a></td>
        </tr>

DELIMETER;

echo $user;
I tried the code you posted but unfortunately the code didn't pass the user_id to the model. My modal code is:
<!-- Modal -->
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">

              <?php
    
               if(isset($_GET['user_id'])){
                   
                $the_user_id  = $_GET['user_id'];
                   
                    $query = query(" SELECT * FROM users WHERE user_id = '{$the_user_id}' " );
                   confirm($query);

                   while($row = fetch_array($query)) {
                       
                        $user_id = $row['user_id'];
                        $username = $row['username'];
                        $email = $row['email'];
                        $password = $row['password'];
                        $userrole = $row['user_role'];
                
                        ?>
                
          <form action="" method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                        <label for="title">User Name</label>
                        <input value="<?php echo $username; ?>" type="text" id="form41" class="form-control"  name="username">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                        <label for="title">Email</label>
                        <input value="<?php echo $email; ?>"  type="text" id="form51" class="form-control"  name="email">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                        <label for="title">Password</label>
                        <input value="<?php echo $password; ?>" type="password" id="form61" class="form-control validate"  name="password">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                        <label for="title">User Role</label>
                        <input value="<?php echo $userrole; ?>" type="text" id="form71" class="form-control"  name="userrole">
                        </div>
                    </div>
                    <div class="col-md-1" style="padding-top:25px;">
                        <div class="form-group">
                         <a><input  class="btn btn-outline-primary btn-rounded waves-effect btn-sm" type="submit" name="update_user"></a>
                        </div>
                    </div>
                </div>
            </form>
              
              <?php } } ?>
                
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Modal -->
So basically all I want to do is open a form and edit a record. Thanks for your patience with me on this one, this would be a great addition for my admin area. Tom.

Rafał Rogulski free answered 5 years ago


Hi Tom, Can you explain my what do you want to achieve? But if you want to bind user_id to modal you can set your own attribute data-userid="<?php echo $user_id; ?>"

Lars7 pro answered 5 years ago


Hi Rafal, I apologise for not following your explanation too well but if I don't use Href then were in the the code do I put my php so that the Modal will open with user_id?

Rafał Rogulski free answered 5 years ago


This link <a class="teal-text" data-toggle="modal" data-target="#basicExample"><i class="fa fa-times"></i></a> should be use like a toggle for modal, you should avoid using hrefattribiut on it. data-target should contain id of div, in your case:
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <!-- Modal conntent -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
This div has id="basicExample", it means if you press your link this modal will show up. Now in this code up, you can place all your data from admin.php?users&user_id=<?php echo $user_id; ?>

Lars7 pro answered 5 years ago


Hi Rafal, I don't understanding what you mean with "div" my knowledge of Javascript is quite basic sorry. Tom

Rafał Rogulski free answered 5 years ago


You can't pass data in href attribute, this link is used to toggle modal, data-toggle="modal" is use to bind this link to javascript function, and data-target="#basicExample". In this case, you must pass this data in #basicExamplediv

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags