I have been trying to find a way to show the message in the row where I removed record. I have a button on one of my td tags. After I click on that button I have function with ajax call that removes record from DB but at the same time I would like to show the message inside of that row for 2sec and then fade out that message. Also, I want to keep my zebra style in my table. Here is my HTML code:
<tr class="~[evenoddrow]">
<td>Some text</td>
<td>
<input id="delDel_(id)" type="checkbox" />
<a name="delRec" onClick="recDelete('myForm',id)"></a>
</td>
</tr>
JavaScript/JQuery code:
function recDelete(frm,recId){
$('#delRec_'+recId).prop('checked', true );
var myForm = $j('#'+frm).serialize();
$.ajax({
type:'POST',
url:'test.html',
data:myForm
})
.done(function(data){
if( $.trim(data) == 'success'){
$('#delRec_' + recId).closest('tr').addClass("feedback").show().html("Record deleted.").delay(1500).fadeOut('slow');
}else{
$('#delRec_' + recId).closest('tr').addClass("feedback2").show().html("Error deleting");
}
})
.fail(function(jqXHR, textStatus, errorThrown){
myFunc(errorThrown)
});
}
My current code is showing message created with feedback class that I added but that row jumps up and down after my message is displayed and fade out. I checked my css and tried to adjust height and width but that did not help. I think that something is odd in my JQuery where I'm adding class to another element. Also my zebra style is off after I show that message. I wan to keep that style after message fades out. If anyone can help with this problem please let me know. Thank you.