Ajaxでレンダリングして部分的にレンダーする

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

私は私のコンソールでのAjaxと呼ばれるデータを見ることができます。数日はかかりましたが、リロードされたitem/item_list.erbの@itemsというデータをajaxという名前で使用する方法を見つけることはできません。すべてのコメントをお寄せいただきありがとうございます。

Answer 1

できません。

ERB補間（ERBタグ<% %>または<%= %>のいずれか）は、JavaScriptがクライアントに送信される前にサーバー上で発生します。スクリプトが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テンプレートを使用します。あなたはまた、追加することによって、AJAXリクエストを送信するためにRailsのUJSを使用することができます

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

をdata-remote="true"をフォームに追加します（通常、フォームヘルパーオプションに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') %>"); 

Answer 2

部分的にdataを渡さないと関係があると思われます。

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

、最終的に部分使用してJSにデータを渡す：

、あなたのビューでそれを呼び出す

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

にビュー/アイテム/ item_list.erbを変更してみてください$("#item_list_wrapper").html("<%= escape_javascript(render partial: 'item/item_list', locals: { items: data }) %>");

これまで言われていたことですが、 oあなたのjsを単純化するためにremote => trueを使用してください。私はこのガイドを簡単に見つけました：https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy