Question

I have a form and when this form is sent via AJAX, I display ajax-loader image and then when the request is done, so in 2 seconds I want to hide this loader. Unfortunately in the practice the ajax-loader is always displayed only on the 0.5s (just my estimate).
What is weird, the CSS class transparent is hide in 2 seconds, but the image loader not.

Overlook I something important? Why the image loader is not hide in 2 seconds, but already in 0.5s?

update_page.html.haml

  %h1 Update
= render :partial => 'update_it'

_update_it.html.haml

%section#update_it
  = form_for(@user, :remote => true, :html => {:class => 'form-horizontal'}) do |f|
    ...
    = submit_tag 'Save changes', :id => 'update_information'

update.js.haml

$('#update_it').html("#{escape_javascript(render(:partial => 'update_it'))}");
setTimeout(function() {
  $('section#update_it').removeClass('transparent')
} , 2000);

script.js

$(document).ready(function(){
  $("#update_information").click(function(){
    $('section#update_it').addClass('transparent');
    $('.transparent').append('<img src="/assets/ajax-loader.gif" alt="" id="loader" class="loader" />');
  });
});

EDIT I forgot on one thing yet – when I click first time on the SUBMIT button, then is used CSS class transparent, but when I click on the button second time, then already not. Why? What’s the problem?

Answer 1

sorry for my straightforward, but I think you are making simple things complicated.

try re-implementing the “ajax loader” using jQuery’s ajax callback functions such as ajaxStart(). (see : http://api.jquery.com/ajaxStart/)

and once the ajax is finished, use another callback function such as “success” or “complete” to replace the ajax-loader. (see http://api.jquery.com/jQuery.ajax/)