Search code examples
ajaxprototypejsdelay

Prototype Ajax.Updater not working correctly with delay


What I got here is a Ajax.Updater prototype js function. It's working perfectly this way:

new Ajax.Updater('feedback', 'contact.php', {
    method: 'post',
    parameters: Form.serialize($('contactForm')),
    onFailure: reportError
});

But I want to delay the process a bit. I asked around on the prototype irc channel and this seems the way to go:

var feedback = function() {
    new Ajax.Updater('feedback', 'contact.php', {
        method: 'post',
        parameters: Form.serialize($('contactForm')),
        onFailure: reportError
    });

    new Effect.Highlight('feedback', {
        duration: 1
    });
}
feedback.delay(1.5);

(don t mind the scriptaculous effect)

There is a echo function in contact.php that looks like this:

echo("Thanks for your message $_POST['Name']!");

After applying the delay the name is no longer echoed! What's wrong?


Solution

  • Ok last try on this one. This works for me and does what you want

    My html-file

    <html>
        <head>
            <title>asd</title>
            <script type="text/javascript" src="src/prototype.js"></script>
            <script type="text/javascript" src="src/scriptaculous.js"></script>
            <script type="text/javascript">
                var feedback = function() {
                    var params = Form.serialize($('contactForm'));
                    new Ajax.Updater('feedback', 'contact.php', {
                        method: 'post',
                        parameters: params,
                        onFailure: reportError,
                        asynchronous:true
                    });
    
                    new Effect.Highlight('feedback', {
                        duration: 1
                    });
                }
                function reportError(request) { alert("error");} 
    
            </script>
        </head>
        <body>
            <form id="contactForm">
                <p>Name:<br><input name="Name" type="text" size="30" maxlength="30"></p>
                <input name="sendbutton" type="button" value="Send" onClick="feedback.delay(1.5);">
            </form>
            <div id="feedback">foo</div>
        </body>
    </html>
    

    My contact.php

    <?php
    echo("Thanks for your message ".$_POST['Name']."!");
    ?>
    

    and using the js files from here