CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
mhy
mhy

Reputation: 505

Simplest way to provide "In progress"..."Done" notification?

I am not new to programming, but kind of rusty in Javascript/web development. I am building an application with Rails, and we have several time-consuming operations during which we want to provide feedback to the user. Basically, I want to do something like this using AJAX:

  1. [User clicks 'ok' or 'proceed']
  2. [Optional confirmation box]
  3. Show a status message saying "Working..." while the operation takes place
  4. When the operation finishes and data returns from the server, status message changes to "Done!" and the results are rendered or some callback occurs.

It has been a while since I did web development, and a simple example of how to achieve something like this would be very helpful. Thank you.

Upvotes: 2

Views: 278

Answers (3)

colinross
colinross

Reputation: 2085

Are you baking your own AJAX framework, or using the built in one in rails? If it is the later, look into the options for linkt_to (in particular, the :update one) http://edgeguides.rubyonrails.org/ajax_on_rails.html

Upvotes: 0

Teneff
Teneff

Reputation: 32158

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   beforeSend(jqXHR, settings) {
      $(body).append('<div id="overlayStatus">Working...</div>');
   },
   complete(jqXHR, textStatus) {
      $('#overlayStatus').html("Ajax call completed: " + textStatus);
      setTimeout(function(){
         $('#overlayStatus').hide();
      }, 1000);
   }
});

Upvotes: 0

Raynos
Raynos

Reputation: 169411

$(window).ajaxStart(function() {
    $("#loader").show();
}).ajaxStop(function() {
    $("#loader").hide();
});

Just globally bind to start and stop. This example shows and hides a loader div. Generally you have a div with a spinner in it letting the user know that it is loading.

The disappearance of the spinner should be enough, a "done" message is overkill.

Upvotes: 5

Related Questions