Cargar contenido dinámico en Bootstrap Modal usando Ajax

 En este tutorial, cargamos contenido dinámico en Bootstrap Modal usando Ajax . Modal es una ventana emergente donde usamos para mostrar el contenido en la misma página web. Es un elemento muy útil para mostrar contenido HTML y también mostrar datos MySQL dinámicos en modal de bootstrap.

Creamos un proceso paso a paso en el que partimos de la creación de una parte HTML que también incluye enlaces Bootstrap CDN (Content Delivery Network). Pasos para crear modal de arranque que cargue contenido dinámicamente,

• Importe los datos de MySQL a la base de datos PHPMyAdmin.
• Creando un archivo de conexión a la base de datos.
• Obtener datos de la base de datos.
• Crear un modal de Bootstrap e incluir enlaces CDN de Bootstrap.
• Cargar contenido dinámico en el modal Bootstrap usando Ajax
• Código fuente completo

Importe los datos de MySQL a la base de datos PHPMyAdmin

Aquí está el código MySQL, copie el código completo y péguelo en la pestaña SQL en PHPMyAdmin,

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

CREATE TABLE `employee` (   `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,   `emp_name` varchar(100) NOT NULL,   `salary` varchar(50) NOT NULL,   `gender` varchar(10) NOT NULL,   `city` varchar(80) NOT NULL,   `email` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;       INSERT INTO `employee` (`id`, `emp_name`, `salary`, `gender`, `city`, `email`) VALUES (1, 'Bikash', '13000', 'male', 'Kanpur', 'phpcodertech@gmail.com'), (2, 'Vishal', '12800', 'male', 'Pune', 'phpcodertech@gmail.com'), (3, 'Vijay', '5000', 'male', 'Jaipur', 'phpcodertech@gmail.com'), (4, 'Rahul', '2500', 'male', 'Kanpur', 'phpcodertech@gmail.com');

Crear un archivo de conexión de base de datos

Aquí creamos un archivo de conexión para la base de datos. A partir de ahí cargamos los datos dinámicos que se muestran en modal de bootstrap.

1 2 3 4 5 6 7 8 9 10 11

<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "dynamic_modal"; /* Database name */   $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }

Obtener datos de la base de datos

Aquí buscamos aquellos datos que nos interesaron previamente en la base de datos SQL. Y esos datos se completaron en Bootstrap modal.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<table id="myTable" border="1">                 <thead class="thead-dark">                     <tr>                         <th scope="col">Sr. No.</th>                         <th scope="col">Name</th>                         <th scope="col">Email</th>                         <th scope="col">Action</th>                       </tr>                 </thead>                 <?php                 $query = "select * from employee";                 $result = mysqli_query($con,$query);                 while($row = mysqli_fetch_array($result)){                     $id = $row['id'];                     $name = $row['emp_name'];                     $email = $row['email'];                   ?>                 <tr>                     <td><?php echo $id;?></td>                     <td><?php echo $name;?></td>                     <td><?php echo $email;?></td>                     <td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td>                  </tr>                 <?php                 }                 ?>   </table>

Creación de un modal de Bootstrap con la inclusión de enlaces CDN de Bootstrap

Enlaces CDN Bootstrap y jQury

1 2 3 4

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'>   <script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Bootstrap Modal

Creando este modal de arranque para minimizar el contenido dinámico de la base de datos MySql.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!-- Modal -->             <div class="modal fade" id="empModal" role="dialog">                 <div class="modal-dialog">                                      <!-- Modal content-->                     <div class="modal-content">                         <div class="modal-header">                           <button type="button" class="close" data-dismiss="modal">&times;</button>                           <h4 class="modal-title">User Info</h4>                         </div>                         <div class="modal-body">                                                    </div>                         <div class="modal-footer">                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                         </div>                     </div>                                    </div>             </div>

Cargar contenido dinámico en el modo Bootstrap usando Ajax

Usamos la clase de botón anterior para llamar a la función jQuery AJax.

1	<td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td>

Código Ajax para llamar al archivo de consulta externo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type='text/javascript'>             $(document).ready(function(){                   $('.userinfo').click(function(){                                        var userid = $(this).data('id');                       // AJAX request                     $.ajax({                         url: 'ajaxfile.php',                         type: 'post',                         data: {userid: userid},                         success: function(response){                             // Add response in Modal body                             $('.modal-body').html(response);                               // Display Modal                             $('#empModal').modal('show');                         }                     });                 });             });             </script>

Código completo

index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

<?php     $host = "localhost"; /* Host name */     $user = "root"; /* User */     $password = ""; /* Password */     $dbname = "dynamic_modal"; /* Database name */       $con = mysqli_connect($host, $user, $password,$dbname);     // Check connection     if (!$con) {      die("Connection failed: " . mysqli_connect_error());     } ?> <!doctype html> <html>     <head>         <title>Display Dynamic MySQL Data in Bootstrap Modal using Ajax</title>         <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>         <!-- Script --> <script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>     </head>     <body >         <div class="container" >             <!-- Modal -->             <div class="modal fade" id="empModal" role="dialog">                 <div class="modal-dialog">                                      <!-- Modal content-->                     <div class="modal-content">                         <div class="modal-header">                           <button type="button" class="close" data-dismiss="modal">&times;</button>                           <h4 class="modal-title">User Info</h4>                         </div>                         <div class="modal-body">                                                    </div>                         <div class="modal-footer">                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                         </div>                     </div>                                    </div>             </div>               <br/>             <table id="myTable" border="1">                 <thead class="thead-dark">                     <tr>                         <th scope="col">Sr. No.</th>                         <th scope="col">Name</th>                         <th scope="col">Email</th>                         <th scope="col">Action</th>                       </tr>                 </thead>                 <?php                 $query = "select * from employee";                 $result = mysqli_query($con,$query);                 while($row = mysqli_fetch_array($result)){                     $id = $row['id'];                     $name = $row['emp_name'];                     $email = $row['email'];                   ?>                 <tr>                     <td><?php echo $id;?></td>                     <td><?php echo $name;?></td>                     <td><?php echo $email;?></td>                     <td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td>                  </tr>                 <?php                 }                 ?>             </table>             <script type='text/javascript'>             $(document).ready(function(){                   $('.userinfo').click(function(){                                        var userid = $(this).data('id');                       // AJAX request                     $.ajax({                         url: 'ajaxfile.php',                         type: 'post',                         data: {userid: userid},                         success: function(response){                             // Add response in Modal body                             $('.modal-body').html(response);                               // Display Modal                             $('#empModal').modal('show');                         }                     });                 });             });             </script>         </div>     </body> </html>

ajaxfile.php

En este archivo, creamos una consulta para llamar a datos dinámicamente en modal con la función OnClick.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "dynamic_modal"; /* Database name */   $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }   $userid = $_POST['userid'];   $sql = "select * from employee where id=".$userid; $result = mysqli_query($con,$sql); $row = mysqli_fetch_assoc($result); ?> <form role="form" method="POST" action="#" enctype="multipart/form-data">   <div class="form-group">     <label for="category"><span class="glyphicon glyphicon-user"></span> Name </label>     <input type="text" class="form-control" name="category" value="<?php echo $row['emp_name'];?>">     <input type="hidden" name="main_id" value="<?php echo $id;?>">   </div>   <div class="form-group">     <label for="bname"><span class="glyphicon glyphicon-eye-open"></span> Salary </label>     <input type="text" class="form-control" name="bname" value="<?php echo $row['salary'];;?>">   </div>   <div class="form-group">     <label for="aname"><span class="glyphicon glyphicon-eye-open"></span> Gender </label>     <input type="text" class="form-control" name="aname" value="<?php echo $row['gender'];;?>">   </div>   <div class="form-group">     <label for="bookid"><span class="glyphicon glyphicon-eye-open"></span> City </label>     <input type="text" class="form-control" name="bookid" value="<?php echo  $row['city'];;?>">   </div>   <div class="form-group">     <label for="bookid"><span class="glyphicon glyphicon-eye-open"></span> Email </label>     <input type="text" class="form-control" name="bookid" value="<?php echo  $row['email'];;?>">   </div> </form> <?php exit; ?>

Código fuente completo

Aquí está el código fuente completo para mostrar el contenido de carga modal de arranque de forma dinámica.

Descargue el código completo desde aquí,