next »

[ksan]

Hey guys,

i wanted to integrate some jquery animations into a site (no ajax). Now it seems i'm running into what i think is a serious limitation of jquery.
The problem is that if you call on a jquery animation from within a normal js function, it is not executed before the whole script is finished.
Can somebody confirm that this is standard behaviour? Is there a way to avoid that?

thanks guys

[perkiset]

GUI elemental changes will not occur during the processing of a script. They occur after the script has terminated, much the way the original VB behaved. A way to circumvent that is to setup a timeout (setTimeout('doMyAnimation()', 100) which will fire - then call the animation from the event-popped function.

[ksan]

thank you for your explanation perks.
i don't know if i understood your suggestion correctly. the way i'm doing it now is that i trigger the animation on the click event and then i set my other function to run with setTimeout(myOtherFunction,3000).
the problem here is, that the animation starts, but gets aborted as soon as the timeout is initiated.

what i'm trying to do is actually pretty simple, yet i can't find a viable solution.

i want to
- validate a form (works)
- then if validated trigger "please wait" animation (works)
- and submit form after animation is finished (does not work)

[perkiset]

Ah ... completely different problem.

You want the animation to happen while you're waiting for POST ... ie., like a scroller happening while you transact a credit card. The problem is that as soon as you POST most browsers see the page as terminated and cease animations.

Funny story - I did this in about 2001 and there was NOBODY that could tell me how to do it (I was developing in Kylix - Delphi for Linux - at the time ... it was a mess). I couldn't find a resource on that one to save my life. I figured it out something like 3 months later while I was sleeping.

Anyhoo - the point here is that only Safari, AFAIK will continue letting an animation run once you've posted - IE and FF do not (I could be off on which is which, but it's only one of the three that continue), so a motion piece while you're posting is not a solution. What you want to do is kick off a process that will not terminate your page, but tell your server to execute the transaction (or whatever). Animation will not terminate during these 3 processes I reference. There are other ways as well, these are the most straight forward IMO.

First: AJAX is the best bet, if the form is not HTTPS. The problem with HTTPS and AJAX is that it will fail occasionally in IE6 (there are several old threads here on that very topic). But normal HTTP will work fine. An AJAX solution is crisp, straightforward and easily debugged. If you're not worried about IE and you're on a secure form then this is still the best bet.

Another way is to request a script. You do this by dynamically writing a new < script > tag onto the page. Create the script URL to send the parameters up on the URL (or better, have the necessary parameters already loaded in previously and stored in the $_SESSION so that you have more control and are less likely to get hacked at). The response from the script should be either a "it failed" message and JS instructions to alert the user, or "top.location = '/mySuccessPage.html'" or something. In other words, the script, upon success does the move to another page.

Yet another way is to use an iFrame. Either dynamically or statically when the page was loaded, you create the iFrame, then when you want to send the request to the server, change the URL of the iFrame. Of course, it should be invisible or outside of the viewing area or behind something on your page so that the surfer doesn't see it. But since your going to the same domain you'll be able to have access to the result and behave accordingly (success / fail etc).

Hope that spins some gears. I've waited about 8 years to give that little trick back. Thanks man

<edit: minor typo>

[ksan]

haha i have to be thanking YOU!  brilliant, that helps a lot!

[arms]

i recommend that if you are already using jquery use their ajax stuf too, then you can be sure it will tie together nicely.

do something like this (don't copy and paste this cause it probably won't work:

Code:

$("submit_button").click(function() {
    // do your validation
    if (valid) {
        // start you animation
        $.post(url, data, function(responseText) {
            // do something with response
        });
    }
});

you may be able to pass a call back to your animation function to be executed when it completes, in which case it would be something like this:

Code:

$("submit_button").click(function() {
    // do your validation
    if (valid) {
        $("#somelelement").some_animation(dictofsomeoptions, function() {
            $.post(url, data, function(responseText) {
                // do something with response
            });
        });
    }
});