ASP.NET jQuery问题

Question

I'm digging around with jQuery for something work related, and I am trying to get a specific flow of events working which I can't seem to get my head around.

I understand how jQuery runs on the front end, functions are called or available to call from within the document.ready area, and have got some animation running on my front end upon the page re-loading (after a postback) - how ever, this is not the exact functionality I want.

Using the standard asp.net postback model (no ajax), is the following possible?

1) Page loads, some jQuery executes bringing my div's into their correct place via an animation. (Working fine). 2) User can click on one of the links inside the div (or the div itself) which then executes a jQuery animation effect, once that animation effect is over, use javascript to postback the page passing in the element that was clicked on. 3) Page posts back, I do all my data handling before the page re-loads again and then my document.ready jQuery runs again.

The part I cant seem to get is #2, I can make some jQuery run on the click of my element by attaching a CSS class to the element and then handling the .click event of that class. This work's fine, but the page doesn't post back (the item clicked on is a LinkButton, just for the sake).

If I manually place Postback code inside a JScript function, and call that function at the end of the chain of animation effects within that jQuery function block, the page posts back but I do not get any of the jQuery animation effect.

What i really need to be able to do is

1) Call the jQuery animation effect 2) Wait until that animation effect is complete 3) Perform page postback upon completion

I'm not a javascript expert by any means, but have managed fine up until this point.

Any points would be greatly appreciated. Regards

Answer 1

I think the problem you have is because the javascript on the "LinkButton" is being bypassed. The javascript is required to make the 'postback' work.

The simplest solution for this is to change it to a "Button". IMO the "LinkButton" is bad and should never be used because a) it's not accessible if you don't have javascript b) a user should expect anything that appears to be a link (GET) to be free of side effects.

Answer 2

jQuery animations are asynchronous (so your browser doesn't lock up). If you manually add postback code after your animation call, the postback will likely occur before the animation has a chance.

Consider adding your postback code to an animation callback. The callback is called after an animation is complete - which sounds like what you want.

function prePostBackAnimation() {   
    $('something').animate({ width: 70 }, function() {
        //jQuery will call this method after the animation finishes.
        //Add postback code here
        __doPostBack(theTarget,theArgument);
    });
}

Code modified from here .