jQuery “please wait” while php executes

Question

I have a script that connects to the PayPal api to check for a valid credit card input. The script can take about 5 seconds to execute and in an effort to keep users from clicking "submit" multiple times if they don't see an immediate response, I'd like to place a "Please wait" indicator.

I have a div, "pleaseWait" which is hidden. In jQuery I have:

$('#submit').click(function(){
    $('#pleaseWait').show();
});

The only problem is if there is an issue, it will send the php error back and the "Please wait" will continue on screen. I decided to try another approach and echo the jQuery in php after the script starts to run, and hide it if there is an error.

 /* Echo the jQuery so the "Please wait" indicator will show on screen */
 echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
 echo "<script type='text/javascript' charset='utf-8'>";
 echo "\$(document).ready(function(){";
 echo "\$('#pleaseWait').show();";
 echo "});";
 echo "</script>";


 if($error == ""){

      /* There is not an error, run php. */

 }else{
      /* There was an error, stop the jQuery from displaying the "please wait" and display the error */
      echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
      echo "<script type='text/javascript' charset='utf-8'>";
      echo "\$(document).ready(function(){";
      echo "\$('#pleaseWait').hide();";
      echo "});";
      echo "</script>";
 }

This can work, but seems really messy. Is there a better way to do this other than multiple echos in php?

Answer 1

try use ajax

$('#submit').click(function(){
    $('#pleaseWait').show();
    $.post('url',card,function(data){
         $('#pleaseWait').hide();
         alert(data);
    })
});

Answer 2

Use $.ajax() , and have the PHP script reply with JSON that can be read in separate success/error callbacks, or a single complete callback.

There's a number of jQuery plugins that give you easy ajaxified forms, ready made. Mike Alsup's jQuery Form Plugin is an especially popular one.

---

Alternately, skip the ajax call entirely, and just disable the submit button when the form is submitted:

$('#submit').click(function(){
    this.disabled = true;
});

Answer 3

I can't say that I fully understand your question but I'll try to answer what I can. If multiple echos are your problem, try jumping in and out of php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#pleaseWait').show();
});
</script>

<?php
if($error == ""){
      /* There is not an error, run php. */
 }else{
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#pleaseWait').hide();
});
</script>

<?php } ?>

But perhaps your problem is that the php is running first, before the page loads, and javascript is running after (or as) the page loads.

Answer 4

It's not exactly what you were originally asking for, but from experience, the best way to prevent a user from clicking submit multiple times during a long processing (like an AJAX call) is to just disable the submit button .

Don't get me wrong, I still think that you should put in a "please wait" message or something. What I'm saying is that let your message concentrate on just being a message, and let your button concentrate on not letting itself get clicked.

It's simple, it doesn't have to keep a lot of complexity in check, and it works.