displaying AJAX based Please Wait on multiple pages

Question

I am making a data entry form in php/mysql. There i have added many dropdowns and auto complete textboxes, which query the database asynchronously and fetch the data. I wanted to inform the user that some kind of interaction between client and server is been taking palce, so i placed an element in hidden form

 <div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
 <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
 </div>

and in the method handleHttpResponse for the ajax component i did the following

if (http.readyState == 4) {
  document.getElementById('wait').style.visibility = "hidden";
  alert('The server script has now completed');
} else {
  document.getElementById('wait').style.visibility = "visible";
}

The function above is in the script file ajax.js which is included in the current page, and everypage where ever ajax is required.

Now this worked fine for me for the single document, but i had the following queries

• If i wish to have similar operation that whenever on ANY PAGE an AJAX request is performed, the user must be shown with the message "PLEASE WAIT along with playing the animation". How must i rewrite my modules so that i don't have to place the DIV on each and everypage. How can i go about it?

  • I wish to add a similar feature but it must happen before the page loads, and it should show the Progress Bar as well, how can i go about it

  • Say my current page makes use of this feature at 3 places, simultaneously, will it show 3 Please Wait Messages or not?

Hope my question is clear enough. Thanks

Answer 1

There's a way to achieve what you are trying to do. For example, if you are using PHP, you can place your HTML in a .inc or .php file and include that wherever you want, even in multiple pages.

1. So, if using PHP, try something like this:

   <?php //inc_loader.php ?><div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
    <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
    </div>
   

Now simply include the above file wherever you want to, like:

<?php include("inc_loader.php"); ?>

The code to include can vary depending upon the Server side language you are using.

2.Also it's not recommended to use the same code in multiple places within the same document as you are using id="wait". An id should be unique within a document, so using it at multiple places does not hold it's meaning. If you want to avoid duplication, then you may try using class i.e. class="wait" if that's something that could help you.

Let us know if that helped you.