I am trying to hide row from while loop. I want to hide full row when delete query success. Delete query is working fine need help to hide row. Thanks in advance.
While loop Code :
While Loop is working fine. Should i add any class to row for deleting. $chcrsid is unique.
while ($rowslctd=mysql_fetch_array($resultslctd))
{
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tbody><tr>
<td>$chcrs</td>
<td>$chcrsid</td>
<td><form name='cancel_selection' class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr><tbody>
Delete Function Code:
Function is running fine but it do not hide row which is deleted from database.
<script>
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
</script>
Give unique id to row that you want to delete or hide. And using jQuery you can achieve that with that unique id.
Something like below:
HTML code
<table id="listData">
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)) {
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tr id='row_selection_" .$chcrs. "'>
<td>". $chcrs ."</td>
<td>". $chcrsid ."</td>
<td><form name='cancel_selection_" .$chcrs. "'
id = 'cancel_selection_" .$chcrs. "'
class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr>";
<?php } ?>
<tbody>
</table>
On AJAX success
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
var hideId = 'table#listData tr#row_selection_' + userId;
$(hideId).remove(); // delete
$(hideId).hide(); // hide
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
TRY THIS
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)):?>
<tr id="row_to_hide">
<td><?php echo $rowslctd['chcrs'];?></td>
<td><?php echo $rowslctd['chcrsid'];?></td>
<td>
<form>
<input name="id" type="hidden" value="<?php echo $rowslctd['chcrsid'];?>">
<button onclick="process_form($(this).closest('form'))">Cancel</button>
</form>
</td>
</tr>
<?php endwhile;?>
</tbody>
<script>
function process_form(form) {
form.on('submit', function(e) {
e.preventDefault();
$.ajax('cancelselection.php',{
data: $(form).serialize(),
type: 'POST',
success: function (data) {
$(form).closest('#row_to_hide').remove();
}
});
});
}
</script>