ajax loading image in rails

Question

I am trying to implement an ajax loading image in my rails app.

Right now what I have is a loading gif that is there on page load, during the ajax process, and then disappears once the ajax is complete. The middle and last part is what I want, but I want this image to be hidden until I click the ajax trigger link.

I have looked up many ways to do this. Some I tried are to create a new partial, using ajax code in js with url tag, data tag, hiding the image in css then showing it on ajax start, but nothing seems to work.

This is what I have:

js:

$(function() {
    $('.load-ajax').hide()  // hide it initially.
        .ajaxStart(function() {
            $(this).show(); // show on any Ajax event.
        })
        .ajaxStop(function() {
            $(this).hide(); // hide it when it is done.
        });
}); 

view:

 <div class='load-ajax'></div> ///loading image div///

  <div class="button"> ///ajax trigger link///
        <%= link_to "Generate Mockups",  { :controller => :ideas, :action => 
      :generate_mockups, remote: true, :id => idea.permalink, :class => 'button'} %>
  </div>

css:

.load-ajax {
    float:right;
    background-image: image-url("ajax-loader.gif");
    width:150px;
    height:20px;
    background-position: center;
    background-repeat: no-repeat;
}

controller:

   def generate_mockups
    @idea = Idea.find_by_permalink(params[:id])
    begin
      @idea.generate_mockups
      rescue Exception => e
      flash[:error] = "There was an error generating the mockups for #
 {@idea.working_name}! # {e.message}"
    end
    respond_to do |format|
      flash.now[:notice] = "Successfully generated mockups for #{@idea.working_name}"
      format.html {redirect_to idea_url(params[:id])}
      format.js
    end
  end

when I watch this expression in chrome, I get this:

$('.load-ajax').ajaxStart: function ( fn ){
arguments: null
caller: null

any idea why?

Answer 1

This is the code that worked for me:

$(function() {
    $('.load-ajax').hide();
    $(document).ajaxStart(function() {
        $('.load-ajax').show();
   });
   $(document).ajaxStop(function() {
        $('.load-ajax').hide();
   });
});

Answer 2

Ajax loading images are actually very simple to do

You just need to call & append the image when the event triggering your ajax call is undertaken. Your current setup is focused on the loading element, when it should be on the ajax call

---

Currently, you're doing this:

  .ajaxStart(function() {
            $(this).show(); // show on any Ajax event.
   })

What you want is this:

$(".your_trigger_element").on("click", function() {
    $(".load_ajax").show();

    $.ajax({
       url: *****,
       success: function(data) {
           $(".load_ajax").hide();
       },
       error: function(data) {
           $(".load_ajax").hide();
       }
    })

});

---

Alternatively, if you want to have an Ajax loader for the whole page, you can use this code:

$(document).ajaxStart(function(){
  $(".load_ajax").show();
});