Question

我正在尝试使用ajax进行过滤功能并渲染部分。我之所以需要这两个是因为有一个元素我不应该重新加载。因此，我试图通过ajax获取过滤数据并对过滤后的数据进行部分渲染。如果有什么我应该让你知道更多，请告诉我。

使索引页面正常工作。

控制器/ item_controller.rb

def index
    @items = Item.all
end

视图/项目/ index.html.erb

<div>
    An element that should not be reloaded
</div>
<div id="item_list_wrapper">
    <%= render partial: 'item/item_list' %>
</div>

视图/项目/ item_list.erb

<% @items.each do |i| %>
    something
<% end %>

当我点击一个按钮时，会调用ajax并重新加载item / item_list.erb。

控制器/ item_controller.rb

def item_filter
    filtered_items = Item.where(filtered item)
    render json: filtered_items
end

的javascript

$.ajax({
    method: 'get',
    url: '/item/filter',
    dataType: 'json',
    data: {
      price: $('#price').val()
    },
    success: function(data) {
        console.log(data);
        $("#item_list_wrapper").html("<%= escape_javascript(render partial: 'item/item_list') %>");
    },
    error: function(){
        alert('error');
    }
});

我可以在控制台中看到名为data的ajax。我花了好几天但是我真的找不到在重新加载的项目/ item_list.erb中使用名为数据的ajax作为@items的方法。提前感谢所有评论。

Answer 1

我认为这可能与未将data传递给您的部分内容有关。尝试将views / item / item_list.erb更改为

<% items.each do |i| %> something <% end %>

然后在你的视图中调用它：

<%= render partial: 'item/item_list', locals: { items: @items } %>

然后最后使用JS传递数据到部分：

$("#item_list_wrapper").html("<%= escape_javascript(render partial: 'item/item_list', locals: { items: data }) %>");

说了这么多，我还建议学习使用remote =＆gt;是的，以简化您的js。我直截了当地发现了这个指南：https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy

Answer 2

你不能。

在将javascript发送到客户端之前，ERB插值（ERB标记<% %>或<%= %>中的任何内容）都会在服务器上发生。如果脚本放在app/assets/javascripts中，那么在部署时编译脚本时就完成了。

Ajax请求稍后会在客户端上发生。

您需要在客户端进行模板化操作：

var $template = $('<li></li>');
var promise = $.getJSON(
  url: '/item/filter',
  data: {
      price: $('#price').val()
  },
  success: function(data) {
    $.each(data, function( index, value ) {
      $("#item_list_wrapper").append( $template.clone().text(value));
    };
  },
  error: function(){
    alert('error');
  }
)

或使用js.erb模板：

var promise = $.ajax(
  url: '/item/filter',
  data: {
      price: $('#price').val()
  },
  dataType: 'application/javascript',
  error: function(){
    alert('error');
  }
)

您还可以使用Rails UJS通过向表单添加data-remote="true"来发送ajax请求（通常通过将remote: true添加到表单帮助程序选项来完成）。

# defaults to the js format
# set "data-type" => :json to send JSON instead
<%= form_tag('/item/filter', remote: true) %>
  <%= number_field_tag(:price) %>
  <%= submit_tag 'Filter items' %>
<% end %>

您需要设置控制器以响应js格式：

class ItemsController
  def filter
    # ...
    respond_to do |format|
      format.js
    end
  end
end

// app/items/views/filter.js.erb
$("#item_list_wrapper").html("<%= escape_javascript(render partial: 'item/item_list') %>");

使用ajax过滤Rails并渲染部分

2 个答案: