ajax在rails中加载图像

Question

我试图在我的rails应用程序中实现ajax加载图像.

现在我所拥有的是一个加载gif,它在页面加载时,在ajax过程中,然后在ajax完成后消失.中间和最后一部分是我想要的,但我想隐藏这个图像,直到我点击ajax触发链接.

我已经找到了许多方法来做到这一点.我试过的一些是创建一个新的部分,使用带有url标记的js中的ajax代码,数据标记,将图像隐藏在css中然后在ajax start上显示它,但似乎没有任何效果.

这就是我所拥有的:

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.
        });
}); 

视图:

 <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;
}

控制器:

   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

当我在chrome中观看这个表达式时,我得到了这个:

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

任何想法为什么？

Answer 1

这是适合我的代码:

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