Alternatively, you could apply the fade out to an inner div, and then remove the row, like so:
http://erikandcolleen.com/erik/projects/jquery/trdelete/content_table4.html But be careful. When applying animation to multiple elements, the callback will get called once for each element. Maybe in this case it wouldn't hurt to call remove a bunch of times, but in general you can get in to trouble if you're not careful. Here's a little trick to only have the callback stuff happen once: http://erikandcolleen.com/erik/projects/jquery/trdelete/content_table5.html Good luck with it. --Erik On 6/4/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
Except he is removing the row from the DOM. Here's an example of the problem: http://erikandcolleen.com/erik/projects/jquery/trdelete/content_table.html Something about the fade out is breaking it. Check out the same thing without the fade: http://erikandcolleen.com/erik/projects/jquery/trdelete/content_table2.html I think the problem is jQuery's animation functions change the css property 'display' to 'block' while animating, which does bad things to tables. It gets even weirder if you don't fade it out all the way: http://erikandcolleen.com/erik/projects/jquery/trdelete/content_table3.html I'd say your best bet is to go without the effect. Should this be filed as a bug? --Erik On 6/4/07, Alex Ezell <[EMAIL PROTECTED]> wrote: > > Pablo, > I'm sort of guessing here, but it might be that fadeOut doesn't remove > the element from the DOM. Perhaps try another effect like DropOutUp > like: > > jqRow.DropOutUp(500); > > /alex > > On 6/4/07, infosoft <[EMAIL PROTECTED]> wrote: > > > > Hi > > > > I have a table where I browse the records of the database. I > > implemented a delete button in each row. When I press this button, I > > send an ajax request to the server. If the response is ok, I need to > > delete the row of the table that have the data I was deleted. > > > > By example: > > > > HTML Code: > > ========= > > > > <table id="explorer"> > > <tr id="row-1"> > > <td>News title</td> > > <td><a href="javascript:deleteRow(1, "row-1">Delete</a></td> > > </tr> > > [...] > > <tr id="row-10"> > > <td>News title</td> > > <td><a href="javascript:deleteRow(10, "row-10">Delete</a></td> > > </tr> > > </table> > > > > Javascript Code: > > =========== > > > > function deleteRow(iId, sRowId) > > { > > jqRow = $("#" + sRowId); > > /* Change de color of row */ > > jqRow.addClass("todelete"); > > if (window.confirm("¿Desea borrar esta noticia?")) > > { > > /* Change de color again */ > > jqRow.removeClass("todelete"); > > jqRow.addClass("deleting"); > > > > if (AJAX_RESPONSE_OK) > > { > > jqRow.fadeOut("slow", function() > > { > > jqRow.remove(); > > window.alert("Record delete"); > > }); > > } > > } > > } > > > > When the code is executed, in the table appears an empty space instead > > of the row. If I not use the fadeOut effect, the row disappears > > correctly. > > > > Could you Help me? > > > > Thanks in advance > > > > Pablo > > > > >
