Using jQuery with ASP.NET web forms on postback

Question

I've read plenty of good blog posts on integrating jQuery with ASP.NET web forms to utilize the data access capabilities, but I'm curious to know how easy it would be to use some of jQuery's animation capabilities before a postback. I can think of two good examples:

1) When I click on a asp:button, animate a div, but then do a regular postback when the animation is finished (or complete the animation after the postback?).

2) When I click on a linkbutton in a gridview, fade out the gridview row, then do the regular postback in the linkbutton's onclick event.

I'm not aware of a solution to this. Everything I've tried has either run the postback before the animation even starts, or runs the animation but then you need to execute the postback in JavaScript (yuck).

I've used jQuery many times to hide a button before a postback so I don't get the double click problem. What exactly is your problem that you need a solution to -- this is not hard. — Hogan
– Hogan, Commented Sep 21, 2010 at 16:57

Peter Mortensen · Accepted Answer · 2011-11-10 23:00:41Z

4

Yes, of course you can do that.

Say for example we take a button to do some postback,

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

OnClick Event - cause the postback to be processed on the server side.

But if you also define a OnClientClick event and call any JavaScript function with a return value to the call. It will decide the post back after the JavaScript function is executed.

For example,

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" OnClientClick="return DoJqueryAnimations();" />

In above example - DoJQueryAnimations() is a JavaScript function. We call it with a "return:".

So when the function is called and decides what to return, the postback will wait for the client function to give the value - true(do postback) / false (no post back).

In the JavaScript function you do the animation and return true.

For example:

function DoJqueryAnimations()
{
    //Do some animations here or call other JavaScript function.
    return true;
}

edited Nov 10, 2011 at 23:00

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Sep 21, 2010 at 17:09

Jsinh

2,5892 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Lauer Over a year ago

I've actually tried to do exactly that. The problem is that the jquery animation does not complete it's action before the javascript function returns true and the postback occurs.

Jsinh Over a year ago

well did tried that with sliding animations and you are true. I wont wait for the animation to complete. Well in most of the animate functions you can provide an callback function in the method where it will call the callback function once the animation is complete u can used that wisely to complete your goal >> here is an example >>> api.jquery.com/slideUp/#speedcallback where it uses duration as first argument and "callback" function as second argument to do something after the animation have completed. Hope this will help you solve your problem

Collectives™ on Stack Overflow

Using jQuery with ASP.NET web forms on postback

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related