Skip to content

Instantly share code, notes, and snippets.

@dasbairagya

dasbairagya/delete.php

Last active March 8, 2022 07:28
Show Gist options
  • Save dasbairagya/bbd5b6c8d1fd2223fece1bdb7fa37ea4 to your computer and use it in GitHub Desktop.
Save dasbairagya/bbd5b6c8d1fd2223fece1bdb7fa37ea4 to your computer and use it in GitHub Desktop.
Download ZIP
Delete a table-row using JQuery Ajax without page reload
Raw
delete.php
<?php
/**
* Template Name: Delete
* Created by PhpStorm.
* User: PC35
* Date: 30-12-2016
* Time: 18:21
*/
global $wpdb;
if(isset($_POST['delete_row']))
{
$id=$_POST['row_id'];
$result = $wpdb->delete('soc_dev_excel', array('id' => $id), array('%d'));
if($result){
echo "success";
exit();
}
}
?>
Raw
index.php
<html>
<head>
<style>tr:nth-child(even) {background: #B8D1F3}
tr:nth-child(odd) {background: #DAE5F4}
th { background-color:#0A819C; color:black; text-align:center; height:30px; }
table,th,td { border:1px solid green;}
table { width:30%; color:black; text-align:center; }
</style>
</head>
<body>
<div style="margin-top:30px;width:75%">
<form method="post" action="">
<table class="widefat">
<thead>
<th style="text-align: center; font-weight: bold;">Sl No.</th>
<th style="text-align: center;font-weight: bold;">Name</th>
<th style="text-align: center;font-weight: bold;">Email</th>
<th style="text-align: center;font-weight: bold;">File Size</th>
<th style="text-align: center;font-weight: bold;">Edit</th>
<th style="text-align: center;font-weight: bold;">Action</th>
</thead>
<tbody>
<?php
$currentUser = get_current_user_id();
global $wpdb;
$sql = "SELECT * from soc_dev_excel where user_id=$currentUser";
$results = $wpdb->get_results($sql);
$i=1;
foreach ($results as $result) {
?>
<tr id="row<?php echo $result->id;?>">
<td><?php echo $i ?></td>
<td class="row-title">
<a href=""></a>
<div id="uploader-"><?php echo $result->sheet_name ?> </div>
</td>
<td><?php echo $result->user_email ?></td>
<td><?php echo $result->file_size ?> kb</td>
<td style="text-align: center;"><a href="<?php echo $result->sheet_url ?> ">Download</a></td>
<td style="text-align: center; ">
<a href="#" id="delete_button<?php echo $result->id;?>" onclick="delete_row('<?php echo $result->id;?>');">Delete</a>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
</form>
</div>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function delete_row(id) {
var lnk = "http://yoursite.com/delete";
if(confirm("Are you sure you want to delete this Record?")){
$.ajax
({
type:'post',
url:lnk,
data:{
delete_row:'delete_row',
row_id:id
},
success:function(data) {
$("#row" + id).remove();
}
});
}
}
</script>
</html>
@dasbairagya
Copy link
Author

While onclick event-handler gets fired the form will process inside the delete_row() function. This function send the data of a particular row by it's id to http://yoursite.com/delete page with key delete_row & row_id and value delete_row & id respectively via post.
Have a look in the delete.php.
Finally in the success data has been returns and the particular row has been deleted by $("#row" + id).remove(); method.
Here ("#row"+ id) means #row1, #row2..... etc.

@joshef-hossain
Copy link

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment