Menu
I'm facing a problem with my jquery. I have a table with multiple records and with each record there is delete link. On clicking that link that particular record is deleted. That is fine but what I am trying for is when a record is deleted it simply disappears without any page refresh. For that I have a jquery code which works fine on a stand alone page but when I'm trying to integrate it with my actual code nothing happens at all. I replaced $ with jQuery but still nothing happening. I also checked for other causes but nothing worked. Can someone point out what could possibly be missing or I'm doing wrong. Codes are below:
This is my row code which is inside a foreach so multiple ones are created
<tr class="showdel">
<td class="align"><input type="checkbox" name="instanceids[]" id="checkid" value="<?php echo $instanceid; ?>" /></td>
<td class="align"><?php echo $i++.'.'; ?></td>
<td><?php echo $title; ?></td>
<td><a href="javascript:void(0);" class="delete" id="<?php echo $instanceid; ?>">Delete</a></td>
</tr>
Below is my jquery code which deletes the record and it simply disappears. It is in head section of the page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function()
{
jQuery(".delete").click(function()
{
var element = jQuery(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
jQuery.ajax({
type: "POST",
url: "content_list.php",
data: info,
success: function() {}
});
jQuery(this).parents(".showdel").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
Please point out what am I doing wrong. Thanks in advance.
PS: Here is my whole head section. See if this helps. May be ordering of scripts is wrong.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title><?php echo $client; ?> Admin</title>
<!-- bootstrap core css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- custom css -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- style.css -->
<link href="css/style.css" rel="stylesheet">
<!-- paginng css -->
<link href="css/pagination.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(".delete").click(function()
{
var element = jQuery(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
jQuery.ajax({
type: "POST",
url: "content_list.php",
data: info,
success: function() {}
});
jQuery(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
</script>
<!-- form validation scripts -->
<script type="text/javascript" src="js/validate_category.js"></script>
<script type="text/javascript" src="js/validate_subcategory.js"></script>
<script type="text/javascript" src="js/validate_subsubcategory.js"></script>
<script type="text/javascript" src="js/selectall.js"></script>
<script type="text/javascript" src="js/validate_content.js"></script>
<script type="text/javascript" src="js/validate_resource.js"></script>
<script type="text/javascript" src="js/validate_data.js"></script>
<script type="text/javascript" src="js/ajax_scripts.js"></script>
</head>
Also my table is loaded by ajax call as Alpesh Panchal below pointed out.
358
Since your data table is loading by an ajax call, your selection of jQuery(".delete") is actually empty when it is trying to set the event handlers before the data is loaded. So, the solution is to set the event handler to the document itself and set a filter for your .delete element. Like this :
jQuery(document).on('click',".delete",(function()
{
//Your code
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
