Hi,

> Step 2 requires a sleep or delay time of 100ms.

Two ways you can do this below. I recommend the second over the first.

1. If you *really* want to refresh the entire page (like a normal form
submit), when the user clicks the submit button you can show your
"updating database" message, set up a form submit to happen 100ms
later, and cancel the original submit. That looks something like this:

    // The handler
    function formSubmitHandler(event) {
        var form;

        // 'this' at this point refers to the form element, so
remember that
        form = this;

        // Show the "updating" message in whatever way you like other
than alert;
        // for instance, you might do $('msgelement').update("Updating
database...");
        // with an element on the page with the ID 'msgelement'
        showUpdatingMessage();

        // Stop the original form submission
        event.stop();

        // Schedule the form submission to occur ~100ms from now
        doSubmit.delay(0.1); // 0.1 seconds = 100ms
        function doSubmit() {
            form.submit();
        }
    }

    // Hooking up the handler on page load
    document.observe("dom:loaded", function() {
        $('yourFormElementID').observe('submit, formSubmitHandler);
    });

That uses Function#delay[1]. The form submission handler is only
called when the user initiates the form submission (not when you use
Form#submit), so you don't have to worry about an infinite loop. Note:
The above loses the field for the button that the user clicked to
submit the form (since we cancelled that); if that's important, you'll
have to adjust the above to include it in the form.

As a user, I'm never very happy about unnecessary delays introduced
into things I'm trying to use, though. A 10th of a second is readily
perceived.

2. Instead of completely refreshing the page, how 'bout using
Ajax.Request or Ajax.Updater to request the new database information
asynchronously, and then updating the page in place? You can leave
your existing form handling in place (to allow for browsers with
JavaScript turned off), but when the user submits the form on a
JavaScript-enabled browser, you can cancel the submission and instead
issue an Ajax.Update[2] call to a server-side resource that will
return an HTML fragment to use to update the existing data shown on
the page. Here's an example of that:

    // The handler
    function formSubmitHandler(event) {
        var form;

        // 'this' at this point refers to the form element, so
remember that
        form = this;

        // Show the "updating" message in whatever way you like other
than alert;
        // for instance, you might do $('msgelement').update("Updating
database...");
        // with an element on the page with the ID 'msgelement'
        showUpdatingMessage();

        // Stop the original form submission
        event.stop();

        // Issue a call to request an HTML fragment from the server
according to
        // the form data and replace the 'dataDisplay' element's
content with
        // the result:
        new Ajax.Updater("dataDisplay", "getdata.page", {
            parameters: form.serialize(true),
            onFailure:  function() {
                showFailureMessage();
            },
            onComplete: function() {
                removeUpdatingMessage();
            }
        });
    }

    // Hooking up the handler on page load
    document.observe("dom:loaded", function() {
        $('yourFormElementID').observe('submit, formSubmitHandler);
    });

No need for a delay, because you do the request immediately; the
message is shown while the request is running.

[Naturally you need to supply your own showUpdatingMessage function
(and in the second options, your own showFailureMessage and
removeUpdatingMessage functions as well).]

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com


On Mar 20, 11:23 am, albert kao <albertk...@gmail.com> wrote:
> On Mar 19, 6:40 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
>
>
>
>
> > Hi,
>
> > I'm sorry, your question isn't very clear.
>
> > 1. What is it you're actually trying to achieve? Forget mechanisms,
> > what is is you want to *do*?
>
> > 2. Function#delay works just fine in IE7 under XP. What it it you're
> > expecting it to do, and what is it doing instead?
>
> > 3. Your quoted code doesn't do anything. Well, okay, it schedules the
> > `sleep` function to run 100ms later, but since `sleep` doesn't *do*
> > anything, that's going to be...subtle.
>
> > Can you provide a bit more info?
> > --
> > T.J. Crowder
> > Independent Software Consultant
> > tj / crowder software / comwww.crowdersoftware.com
>
> > On Mar 19, 7:24 pm, albert kao <albertk...@gmail.com> wrote:
>
> > > I like to have a sleep or delay function in javascript.
> > > The Prototype library 1.6.1 has a delay function.
> > > It is working well in Firefox or Chrome but not IE 7 on windows XP.
> > > Please help (I cannot use newer version of windows).
> > > function sleep()
> > > {
>
> > > }
>
> > > sleep.delay(0.1);
>
> I like to have my web browser to do this continuously.
> 1. user clicks the submit button
> 2. display the message "updating database" for a short time
> 3. new data arrives from database
> 4. refresh page to display new data
>
> Step 2 requires a sleep or delay time of 100ms.

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to