Rails在jQuery Ajax调用后查看不更新

时间:2014-11-20 17:54:34

标签: jquery ruby-on-rails ajax ruby-on-rails-4 coffeescript

我正处于第一个铁轨项目的中间,并且已经到了我想要更改我的模型的ORDER BY的阶段。索引取决于SELECT标记的值。

我在index.html.erb中有以下onchange

<div id="sortBy">
        <span>Sort by:</span>
        <%= select_tag "sort_by", options_for_select([ "Newest first", "Oldest first" ], "Newest first"), { :onchange => "changeSortOrderJs(this.value)" } %>
</div>

那应该更新一下:

<% @horses.each do | horse | %>
   <%= horse.name %>
<% end %>

这在我的coffeescript资源中调用以下方法(以@为前缀,因为它是一个匿名函数):

@changeSortOrderJs = (val) ->
  $.ajax
    type: 'GET'
    url: '/horses'
    data: order: val

这映射到HorsesController中的索引操作

def index
        order = params[:order]

        if(order == nil) 
            order = 'Newest first'
        end

        @horses = Array.new

        if order == 'Newest first'

            @horses = Horse.all.order("created_at DESC")

        elsif order == 'Oldest first'

            @horses = Horse.all.order("created_at ASC")
        end

        //tried this later but didn't work either
        respond_to do |format|
            format.html
        end
    end

我可以在我的development.log中看到正在运行的@horses正在以正确的顺序填充。但是视图没有刷新。

如果我在ajax调用中使用respond_with(@horses)然后成功回调,即

@changeSortOrderJs = (val) ->
  $.ajax
    type: 'GET'
    url: '/horses'
    data: order: val
    success: (result) ->
      $('body').html(result)
然后它确实有效并且马匹被重新排序。但我宁愿不以这种方式取代整个身体。

我认为实例变量的重点在于您可以重新定义它们并且视图会自动更新吗?

1 个答案:

答案 0 :(得分:1)

实例变量不只是神奇地更新页面。您必须使用成功函数,就像您在最后一段代码中所做的那样。如果您想要即时更新,您应该考虑使用Knockout.js或类似的东西

此外,如果您计划渲染部分内容,则必须在Coffeescript文件之外执行此操作。例如,在您的控制器中执行:

respond_to do |format|
  format.js
end

app / controllers / horses / index.js:

container = $('#your_div_here');

<% @horses.each do |horse| %>
  container.prepend( "<%= j render( :partial => 'horses/horse', :locals => { :horse => horse } ) %>" );
<% end %>