jQuery chaining and ugly formatting

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.

`$(this).parent().parent();` could be `$(this).closest("tr");`, other than that it looks fine — John Rasch, Feb 16 '10 at 17:24
I'm not sure having buttons inside links is a good idea. Can you not use one or the other? — meouw, Feb 16 '10 at 17:30

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

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

Button inside of anchor link works in Firefox but not in Internet Explorer?

edited May 23 '17 at 12:01

Community

1
1

answered Feb 16 '10 at 17:37

Fermin

34,961
21
83
129

Thanks! You have probably saved me a lot of tears in my debugging stage. – Travis Feb 17 '10 at 00:50

jQuery chaining and ugly formatting

1 Answers1