Loading ajax image on rails

Question

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

I currently have a bootable gif that is present on the page load, during the ajax process, and then disappears after ajax is completed. The middle and last part is what I want, but I want this image to be hidden until I click on the link to the ajax trigger.

I have been looking for many ways to do this. Some of them I tried to create a new partial using ajax code in js with url tag, data tag, hiding the image in css and then showing it when ajax starts up, but nothing works.

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 look at this expression in chrome, I get the following:

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

any idea why?

Answer 1

, :

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

Answer 2

Ajax

, , ajax. , ajax

---

:

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

, :

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

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

});

---

, Ajax , :

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