jQuery chaining and ugly formatting
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>
开发者_JAVA技巧 <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.
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?
精彩评论