How can I add a "Loading...Please wait..." feature?

Question

I have a very simple table on my website, that displays different URL's. I have an input field where I can type in a URL and click 'Submit' to add additional URL's.

However, I want to add an MD5 grabbing feature to this, using @md5_file(); to grab the MD5 of the URL and check to make sure it's the MD5 it should be, before adding it to the database. However it may take a few seconds for it to grab the MD5 and compare it, so I would like to add a little bit of text, like "Processing...Please wait..." while it does the comparing, and then once it's compared I want that text to go away.

I've never done this before, or even though about doing it so I have no idea where to start. I'll go ahead and put javascript as a tag for this, since I'm guessing it would be done with javascript, but I really have no idea. I don't think it's possible with PHP, but again, I have no idea.

Any suggestions?

Answer 1

http://www.ajaxload.info/ is a very interesting place. Turn this image visible and invisible

Answer 2

I would use jQuery. Here is the example:

In your javascript code:

$.ajax({  
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  beforeSend:  function() {
    $('#message').fadeIn('');
  },
  success: function(msg){
   $('#message').fadeOut('');
 }
});

And your HTML

<div id="message">Processing...Please wait...</div>

Here is a reference: http://api.jquery.com/jQuery.ajax/

Answer 3

The way I have done it is in the function where I do an AJAX post I show a dialog (before the post) and after the ajax post, I hide it. Any modal dialog will do (I like jQuery's since I commonly use a theme that goes with whatever site design I am using). The problem with this is that sometimes the post doesn't take very long and it looks jittery. If that is the case, a simple div in the middle of the page with coloring that stands out will suffice.