Question

I have a table that is created in a DataList in ASP.Net. This table has three fields of text, then a field with an edit button, and a field with a delete button. When a person clicks the delete button, it posts back, deletes the items, and then binds the DataList again. The DataList is in an UpdatePanel so the item smoothly disappears after a half of a second or maybe a little more, but what I’d really like is for the row to slide out (up) as soon as they hit the delete button, and then have it delete the item on the post back.

I can make the row slide out with jQuery, but the postback gets in the way. How do you deal with that?

Answer 1

You can use page methods in asp.net to send a request to the server without doing a postback. They are very simple to use and you can do whatever effect you like when the ajax call is completed (you get a function called on success).

If you want to stick with the post back one solution is the following:

<asp:Button id='myButton' OnClientClick='return fadeThenAllowSubmit()' ... /> 

and in js something like:

var allowSubmit = false; function fadeThenAllowSubmit() {     if (allowSubmit) return true     // do the jquery stuff that will be completed in, let's say, 1000ms     setTimeout(function() {         allowSubmit = true         $('input[id$=myButton]').click()         allowSubmit = false     }, 1000)     return false } 

It’s a bit of a hack, the idea is to cancel the postback initially, do some stuff then set a timer where the postback will be enabled. The big problem with this approach is that the fade effect and the actual delete are independent (in case of an error you still get the fade effect).