My beforeSend function is not working properly, as the background color does not change. I suspect it may be due to not correctly referencing the id variable posted from the form. Below is the relevant HTML and JS code:
HTML
<div id="rec<?php echo $id; ?>"class="del_box">
<form method="post" class="delform">
<input name="id" type="hidden" id="id" value="<?php echo $id; ?>" />
<input name="ad_link" type="hidden" id="ad_link" value="<?php echo $ad_link; ?>" />
<input name="listing_img" type="hidden" id="listing_img" value="<?php echo $listing_img; ?>" />
<button type="submit">Delete</button>
</form>
</div>
JS
$("document").ready(function() {
$(".delform").submit(function() {
data = $(this).serialize();
if (confirm("Are you sure you want to delete this listing?")) {
$.ajax({
type: "POST",
dataType: "json",
url: "delete_list.php",
data: data,
beforeSend: function() {
$("#" + "rec" + data["id"]).animate({
'backgroundColor': '#fb6c6c'
}, 600);
}
success: function(response) {
if (response.success) {
$("#rec" + response.idc).slideUp(600, function() {
$("#rec" + response.idc).remove();
});
} else {
console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
}
},
error: function() {
alert("An Error has ocurred contacting with the server. Sorry");
}
});
return false;
}
});
});
CSS
.del_box {
background-image: none;
background-color:#9F9F9F;
}