Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos
PHP Ajax Update Data in MySQL By Using Bootstrap Modal

PHP Ajax Update Data in MySQL By Using Bootstrap Modal

Posted on February 9, 2022February 17, 2022 By XpertPhp

In this tutorial, we will explain to you how to PHP ajax update 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.

PHP Ajax Update Data in MySQL Bootstrap Modal

Create Database in table

1
2
3
4
5
6
7
8
 
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

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

Update 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 create the HTML form in bootstrap modal after then pass update data using the ajax.
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Ajax Update 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 Update 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 align="right">
                    <button type="button" class="btn btn-primary text-right m-5" data-toggle="modal" data-target="#addDataModal">Add</button>
                </div>
                <br />
                <div id="employee_table">
                    <table class="table table-bordered">
                        <tr>
                            <th width="70%">Title</th>
                            <th width="15%">Edit</th>
                            <th width="15%">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="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></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>
    <!-- Add Data Modal -->
    <div class="modal fade" id="addDataModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Add Notes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="txtTitle">Title</label>
                        <input type="text" class="form-control" id="txtTitle" name="txtTitle">
                    </div>
                    <div class="form-group">
                        <label for="txtDescription"> Description</label>
                        <textarea class="form-control" id="txtDescription" name="txtDescription" rows="3"></textarea>
                    </div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" id="add_data" class="btn btn-primary" value="Add">Add</button>
                </div>
            </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>
<!-- Update data-->
    <div class="modal fade" id="updateDataModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Notes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
<div class="modal-body">
                    <div class="form-group">
                        <label for="txtTitle">Title</label>
                        <input type="text" class="form-control" id="txtTitle" name="txtTitle">
                    </div>
                    <div class="form-group">
                        <label for="txtDescription"> Description</label>
                        <textarea class="form-control" id="txtDescription" name="txtDescription" rows="3"></textarea>
                    </div>
<input type="hidden" name="note_id" id="note_id" />
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" id="update_detail" class="btn btn-primary" value="Update">Update</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function() {
        // add
        $(document).on("click", "#add_data", function() {
            var title = $('#txtTitle').val();
            var description = $('#txtDescription').val();
            $.ajax({
                url: "insert.php",
                type: "POST",
                catch: false,
                data: {
                    added: 1,
                    title: title,
                    description: description
                },
                success: function(dataResult) {
                    var dataResult = JSON.parse(dataResult);
                    if (dataResult.status == 1) {
                        $('#addDataModal').modal().hide();
                        swal("Note successfully Inserted!", {
                            icon: "success",
                        }).then((result) => {
                            location.reload();
                        });
                    }
                }
            });
        });
// view
        $(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');
                }
            });
        });
// fetch
$(document).on('click', '.edit_data', function(){  
           var note_id = $(this).attr("id");  
           $.ajax({  
                url:"update.php",  
                method:"POST",  
                data:{fetch: 1,note_id:note_id},  
                dataType:"json",  
                success:function(data){  
                     $('#updateDataModal #txtTitle').val(data.title);  
                     $('#updateDataModal #txtDescription').val(data.description);  
                     $('#updateDataModal #note_id').val(data.id);  
                     $('#updateDataModal').modal('show');  
                }  
           });  
        });
// update
$(document).on("click", "#update_detail", function() {
            var title = $('#updateDataModal #txtTitle').val();
            var description = $('#updateDataModal #txtDescription').val();
            var note_id = $('#updateDataModal #note_id').val();
            $.ajax({
                url: "update.php",
                type: "POST",
                catch: false,
                data: {
                    updated: 1,
                    title: title,
                    description: description,
                    note_id: note_id
                },
                success: function(dataResult) {
                    var dataResult = JSON.parse(dataResult);
                    if (dataResult.status == 1) {
                        $('#updateDataModal').modal().hide();
                        swal("Note successfully Updated!", {
                            icon: "success",
                        }).then((result) => {
                            location.reload();
                        });
                    }
                }
            });
        });
 
    });
</script>

update.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
<?php
 
include('config.php');
// Update Data
if(isset($_POST['updated'])){
    $title = $_POST['title'];
    $description = $_POST['description'];
    $query = "UPDATE notes SET title='".$title."',description='".$description."' WHERE id = '".$_POST["note_id"]."'";
    if (mysqli_query($con,$query)){
        echo json_encode(array("status" => 1));
    }
    else{
        echo json_encode(array("status"=>2));
    }
}
// Fetch Data
if(isset($_POST["fetch"]) && isset($_POST["note_id"]))  
{  
      $output = '';  
      $query = "SELECT * FROM notes WHERE id = '".$_POST["note_id"]."'";  
      $result = mysqli_query($con, $query);  
      $row = mysqli_fetch_array($result);  
      echo json_encode($row);
}  
?>

Download

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • How To Create Line & Area Chart In Codeigniter With AmChart
  • Laravel 6 Pagination Example Tutorial
  • How to detect Ajax Request in PHP
  • Jquery autocomplete search using php mysql and ajax
  • Laravel One To One Polymorphic Eloquent Relationship Tutorial Example
Ajax, Bootstrap, MySql, Php

Post navigation

Previous Post: PHP Ajax Insert Data in MySQL By Using Bootstrap Modal
Next Post: Laravel 9 CRUD Operation Example Tutorial

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Latest Posts

  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example
  • Laravel 9 Stripe Payment Gateway Integrate Example
  • How To Send Email Using Mailtrap In Laravel 9
  • Laravel 9 Fullcalendar Ajax Example Tutorial

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Age Calculator Online
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com