PHP — Dynamic Drag and Drop table rows using JQuery Ajax with MySQL

Bhavesh Sonagra
2 min readApr 24, 2021

Hi Guys,

In this tutorial,I will learn you how to use confirmation alert afore delete record with jquery ajax.you can facile and simply use attestation alert afore efface record with jquery ajax.

Today, i will show you how to add confirm box before delete item in php. It’s always necessary to confirm yes or no about that removing record. If we confirm before delete records it’s safe to client that delete right records. So in this post i will show you how to add confirmation popup of jquery and remove item dynamically.

<p><strong class=”step”>Step 1: Table structure</strong></p>

<p>I am using posts table in the example and added some records.</p>

<p><b>SQL Query:</b></p>
<pre data-enlighter-language=”sql”>
CREATE TABLE `posts` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`title` varchar(200) NOT NULL,
`content` text NOT NULL,
`link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
</pre>

<p><strong class=”step”>Step 2: Configuration</strong></p>
<p>Create a config.php file for the database configuration.</p>

<pre data-enlighter-language=”php”>
<?php

$host = “localhost”; /* Host name */
$user = “root”; /* User */
$password = “root”; /* Password */
$dbname = “tutorial”; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die(“Connection failed: “ . mysqli_connect_error());

?>
</pre>

<p><strong class=”step”>Step 3: Download & Include</strong></p>
<p>Include with Bootstrap and jQuery library.</p>

<pre data-enlighter-language=”html”>

<link href=’bootstrap/css/bootstrap.min.css’ rel=’stylesheet’ type=’text/css’>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=’bootstrap/js/bootstrap.min.js’></script>
<script src=’bootbox.min.js’></script>

</pre>

<p><strong class=”step”>Step 4: HTML & PHP</strong></p>
<p>Fetch records from posts table and list in the table.</p>

<pre data-enlighter-language=”php”>

<?php
include “config.php”;
?>
<div class=’container’>
<table border=’1' class=’table’>
<tr style=’background: whitesmoke;’>
<th>S.no</th>
<th>Title</th>
<th>Operation</th>
</tr>

<?php
$query = “SELECT * FROM posts”;
$result = mysqli_query($con,$query);

$count = 1;
while($row = mysqli_fetch_assoc($result) ){
$id = $row[‘id’];
$title = $row[‘title’];
$link = $row[‘link’];

??>
<tr>
<td align=’center’><?= $count ?></td>
<td><a href=’<?= $link ?>’ target=’_blank’><?= $title ?></a></td>
<td align=’center’>
<button class=’delete btn btn-danger’ id=’del_<?= $id ?>’ data-id=’<?= $id ?>’ >Delete</button>
</td>
</tr>
<?php
$count++;
}
?>
</table>
</div>

</pre>

more..

https://codingtracker.blogspot.com/2021/04/php-dynamic-drag-and-drop-table-rows.html

--

--