Tutorial :Prototype Ajax.Updater not working correctly with delay



Question:

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:1

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


Solution:2

Why don't you just wrap the thing in a setTimeOut call. Thus delaying the ajax request instead of delaying the displaying. Which is btw excatly what the prototype delay function does

But

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

should also work


Solution:3

I give it another try.

Change

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

to

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

and try again.

And make sure you have implemented the reportError function you pass in here

onFailure: reportError  

e.g.

function reportError(request){alert('Shit happens!');}  


Solution:4

This doesn't apply to the original question asked - but since I came across this thread in my search. Figured I'd post my results.

I had some code an ajax updater suddenly stop working:

new Ajax.Updater('my_id, 'http://mydomain.com/my_script.php');  

The reason it didnt work for me because I was on www.mydomain.com (opposed to mydomain.com)

I simply changed it to:

new Ajax.Updater('my_id, 'my_script.php');  

and it worked fine.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »