0

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.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
espresso_coffee
  • 5,980
  • 11
  • 83
  • 193

0 Answers0