How do I fade a row out before postback

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

have you tried looking at any of the Ajax control toolkit items? I believe there are some controls in there that will head with client side (java) code if your not extremely familiar

Answer 2

I would use client side Javascript to manually scale the "opacity" CSS property down to zero, then mark the element as "display: none" then submit the post-back.

I believe that in Internet Explorer, you need to use the "Filter" CSS property to do this as it does not support opacity.

You could just code up a routine to set both properties and that should cover all the major browsers.

Answer 3

Register the handler for form "submit" event.

$("form").submit(function() {

    // if user initiated delete action 
    // do your thing with deleted row (effects, etc.)

    // after you're done with it, submit the form from script
    // (you can queue the submission after the effect)
    // the submission from the script won't trigger this event handler

    return false; // prevent submission
}

Preventing form submission is necessary to avoid interference with the effects you want to perform. After they are finished, you are free to proceed with submission.

Answer 4

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).