how to run jquery before asp.net postback

Question

I want to run a jquery code with animation/fade-out of a box. The box is a ASP listview containing data from the database. When the user clicks 'delete' on the box, an updatecommand will be executed, so data in the database will be updated, but it will not execute the fade-out animation of jquery because the page is already refreshed. How to first fade-out the box with jquery and then postback the page?

Answer 1

You can use following JS to fade-out the box in the beginRequest function

jQuery(function ($) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(function (source, args) {
        // code to fade out the box
    });
    prm.add_endRequest(function (source, args) {
        // any other code you want to execute after the post back finishes
    });
});

Be sure to add a ScriptManager and UpdatePanel to your page. For more details you may check this MSDN reference

Answer 2

You can use the "OnClientClick" attribute of your delete button to run the jQuery.

Then you can return from your jQuery method that the animation has run and finished, to then confirm the call to your PostBack.

Button:

<asp:Button id="btnDelete" runat="server" OnClientClick="return runAnimation()" OnClick="btnDelete_Click" text="Delete" />

jQuery:

function runAnimation()
{
   // animate 
   return true; // Do postback

   // problem
   return false; // Don't do postback
}