jQuery chaining and ugly formating

Question

I have a table with two cells to each row. The first contains the data and the second contains the input buttons "Edit" and "Delete". To make this unobtrusive ajax I'm using the code below:

<tr>
    <td>I have some data for you</td>
    <td>
       <a href="edit" class="edit"><input type="button" value="Edit" /></a>
       <a href="delete" class="delete"><input type="button" value="Delete" /></a>
    </td>
</tr>

$("a.edit").live("click",function(){ 
    $tr = $(this).parent().parent();
    $tr.children().fadeOut(400,function(){
        $tr.loadingGif(function(){
            $tr.ajaxGetEditForm();
            });
        });
    return false;      
});

.loadingGif() is just a function that turns the background yellow and provides a 'loading' gif. ajaxGetEditForm() is a function that makes the Ajax call and replaces the old data with the Edit input form.

It works as expected but is their a cleaner way to chain these events? when I have $tr.children().fadeOut().parent().isLoading()... javascript just shoots through the functions. I.E. I want it to wait for the fadeOut animation to finish before it starts the next.

Any insight is greatly appreciated!

Answer 1

You'll have some issues with you're input buttons inside the anchor tag in some browsers, see this question for more info:

http://stackoverflow.com/questions/802839/my-links-dont-work-in-ie-but-do-in-firefox