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?

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 complete.. — Joko Wandiro
– Joko Wandiro, Commented Apr 26, 2011 at 2:02

LanceHub · Accepted Answer · 2011-04-26 01:57:12Z

7

try use ajax

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

answered Apr 26, 2011 at 1:57

LanceHub

5901 gold badge4 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Over a year ago

Thank you! I am not very very familiar with ajax but will do my due diligence in the appropriate research, thank you for pointing me in the right direction.

Matt Ball · Accepted Answer · 2011-04-26 02:04:36Z

4

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;
});

edited Apr 26, 2011 at 2:04

answered Apr 26, 2011 at 1:57

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

2 Comments

Jason Over a year ago

Very similar to LanceHub. Ajax it is! Thank you for pointing me in the right direction as well.

Jason Over a year ago

If it is disabled, how would you re-enable it if there was a problem? The underlying problem is that if it is submitted, php may have an error which will send them back to the page. If the submit button was disabled previously, it would stay disabled unless the page was refreshed.

bozdoz · Accepted Answer · 2011-04-26 02:02:07Z

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.

Richard Neil Ilagan · Accepted Answer · 2011-04-26 02:04:15Z

0

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.

answered Apr 26, 2011 at 2:04

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

1 Comment

Jason Over a year ago

Removing it still runs into the same basic problem. How to get it back after removing it if there is an error in the php. You would need to un-remove it for them to fix the problem and try again.

Collectives™ on Stack Overflow

jQuery "please wait" while php executes

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related