PHP Ajax View Data in MySQL By Using Bootstrap Modal

February 7, 2022 XpertPhp

In this tutorial, we will explain to you how to PHP ajax view data in MySQL by using bootstrap modal.

sometimes we need to show dynamic data from the database to Bootstrap Modal by using PHP with Ajax Jquery. Bootstrap Modal is a popup window or dialog box displayed at the top of the website. Bootstrap Modal is used to display dynamic data from the database in the popup dialog box, in Bootstrap Modal we can also create forms, so we can easily create a bootstrap modal using the bootstrap CDN.

Create Database in table


CREATE TABLE `notes` (
  `id` int(11) NOT NULL,
  `title` varchar(165) NOT NULL,
  `description` text NOT NULL,
  `created_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;

CREATE TABLE `notes` (

`id` int(11) NOT NULL,

`title` varchar(165) NOT NULL,

`description` text NOT NULL,

`created_at` datetime NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;

Connect to Database

In this step, we will create a new config.php file. The code below is to provides how to connect with the database.
The following code is used to connect MySQL from PHP. It requires hostname, database username, database password, and database name.
config.php

<?php 
$con = mysqli_connect("localhost","root","","testdb");
?>

<?php

$con = mysqli_connect("localhost","root","","testdb");

View data using ajax in bootstrap modal

In this example, We will Create an index.php PHP file. after then we will paste the below code into our file.
We will get data from the mysql in bootstrap modal using ajax.
index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Ajax View Data in MySQL By Using Bootstrap Modal - XpertPhp</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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
    <div class="container">
        <h3 align="center">PHP Ajax Insert Data in MySQL By Using Bootstrap Modal</h3>
        <br />
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
            <div class="table-responsive">
                <div id="employee_table">
                    <table class="table table-bordered">
                        <tr>
                            <th width="70%">Title</th>
                            <th width="30%">View</th>
                        </tr>
                        <?php 
						include('config.php');
						$query = mysqli_query($con, "SELECT * FROM notes ORDER BY ID DESC");

						while ($row = mysqli_fetch_array($query)) { ?>
                            <tr>
                                <td><?php echo $row['title'] ?></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>
    </div>
    <!-- View Data Modal-->
    <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">×</button>
                    <h4 class="modal-title">Note Details</h4>
                </div>
                <div class="modal-body" id="note_detail">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function() {
        $(document).on('click', '.view_data', function() {
            var note_id = $(this).attr("id");
            $.ajax({
                url: "insert.php",
                method: "POST",
                data: {
                    note_id: note_id
                },
                success: function(data) {
                    $('#note_detail').html(data);
                    $('#dataModal').modal('show');
                }
            });
        });

    });
</script>

<!DOCTYPE html>

<head>

<title>PHP Ajax View Data in MySQL By Using Bootstrap Modal - XpertPhp</title>

</head>

<body>

<h3 align="center">PHP Ajax Insert Data in MySQL By Using Bootstrap Modal</h3>

<br />

</div>

<tr>

<th width="70%">Title</th>

</tr>

<?php

include('config.php');

$query = mysqli_query($con, "SELECT * FROM notes ORDER BY ID DESC");

while ($row = mysqli_fetch_array($query)) { ?>

<tr>

<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>

<h4 class="modal-title">Note Details</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</body>

</html>

$(document).ready(function() {

$(document).on('click', '.view_data', function() {

var note_id = $(this).attr("id");

$.ajax({

url: "insert.php",

method: "POST",

data: {

note_id: note_id

success: function(data) {

$('#note_detail').html(data);

$('#dataModal').modal('show');

}

});

</script>

insert.php

<?php 

include('config.php');

// View Data
if(isset($_POST["note_id"]))  
 {  
      $output = '';  
      $query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";  
      $result = mysqli_query($con, $query);  
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>Name</label></td>  
                     <td width="70%">'.$row["title"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Description</label></td>  
                     <td width="70%">'.$row["description"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Date</label></td>  
                     <td width="70%">'.$row["created_at"].'</td>  
                </tr>  
           ';  
      }  
      $output .= '  
           </table>  
      </div>  
      ';  
      echo $output;  
 }  
?>

<?php

include('config.php');

// View Data

if(isset($_POST["note_id"]))

{

$output = '';

$query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";

$result = mysqli_query($con, $query);

$output .= '

<table class="table table-bordered">';

while($row = mysqli_fetch_array($result))

{

$output .= '

<tr>

<td width="70%">'.$row["title"].'</td>

</tr>

<tr>

<td width="30%"><label>Description</label></td>

<td width="70%">'.$row["description"].'</td>

</tr>

<tr>

<td width="70%">'.$row["created_at"].'</td>

</tr>

}

$output .= '

</table>

</div>

echo $output;

}

Download

Please follow and like us:

Create Database in table

Connect to Database

View data using ajax in bootstrap modal

Related posts: