javascript - jQuery "please wait" while php executes - Stack Overflow

admin管理员组

文章数量:1287788

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=\".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=\".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?

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./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./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?

• php
• javascript
• jquery

Share Improve this question Follow edited Apr 26, 2011 at 1:55 Eli 17.8k44 gold badges3939 silver badges4949 bronze badges asked Apr 26, 2011 at 1:52 JasonJason 21933 silver badges1111 bronze badges 1

• if you want syncronize your loading bar with paypal process check documentation about it. If you want user click submit just once use unbind when user clicked and bind when ajax is plete.. – Joko Wandiro Commented Apr 26, 2011 at 2:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

try use ajax

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

Use $.ajax(), and have the PHP script reply with JSON that can be read in separate success/error callbacks, or a single plete 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;
});

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./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./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.

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 plexity in check, and it works.

本文标签： javascriptjQuery quotplease waitquot while php executesStack Overflow