Rails Ajaxリクエストからの応答を得た後のJavascriptのやり直しhtml

Question

私のインデックスは、価格の降順と価格の上昇がAmazonのように変わります。

今、私はサイトにajaxリクエストを送信し、selectの新しい値がデータを要求しています。サイトはデータベースからデータを取得してソートします。

JavaScriptをインデックスページに並べ替えて、書籍の返答をソートできますか？ BookController.rb

def index 
    if params.dig("book", "title").nil? && params.dig("users", "university").nil? 
    @books = Book.where({title: params.dig("book", "title")}) 
    .joins(:user).where(users: {university: params.dig("users", "university")}) 
    elsif !params.dig("book", "title").nil? && params.dig("users", "university").nil? 
    @books = Book.where({title: params.dig("book", "title")}) 
    elsif params.dig("book", "title").nil? && !params.dig("users", "university").nil? 
    @books = Book.joins(:user).where(users: {university: params.dig("users", "university")}) 
    else 
    @books = Book.all 
    end 
    case params[:sort] 
    when "Price Descending" 
     @books.order(price_cents: "DESC") 
    when "Price Ascending" 
     @books.order(price_cents: "ASC") 
    else 
     @books.sort_by(&:created_at) 
    end 
end 

ブックIndex.html.erb

<select id="priceSelect"> 
    <option value="Best Results" selected="selected">Best Results</option> 
    <option value="Price Descending">Price Descending</option> 
    <option value="Price Ascending">Price Ascending</option> 
</select> 

. 
. 
. 

<% @books.each do |book| %> 
    <div class="col-xs-12 selectable-card"> 
    <%= link_to book_path(book.id) do %> 
     ... 
    <% end %> 
    </div> 
<% end %> 

<script> 
    $('#priceSelect').change(function(){ 
    $.ajax({ 
     url: "books", 
     type: "GET", 
     data: {sort: $('#priceSelect :selected').val()}, 
     success:function(result){ 
     console.log(result); 
     }, 
    }) 
    }); 
</script> 

そして最後に、私のroutes.rbを

resources :books do 
    resources :users 
end 

Answer 1

として構文エラーまたはその他の問題が発生する可能性があり、この答え私はテストせずにここに書いた。それはそれを行う方法に関する単なるガイドです。これらのアイデアを取り、起こり得る問題を修正してください。交換する領域にマークするdiv要素を追加し、あなたのhtmlで

respond_to do |format| 
    format.html 
    format.json { render json: @books } 
end 

：あなたのコントローラで

あなたはJSONオブジェクトを返すことができ

<div class ="books-info"> 
    <% @books.each do |book| %> 
    <div class="col-xs-12 selectable-card"> 
     <%= link_to book_path(book.id) do %> 
     ... 
     <% end %> 
    </div> 
    <% end %> 
</div> 

をごJavaScriptであなたはJSONを処理する必要がありますレスポンスを作成し、元のリストを置き換えるhtmlを作成してください：

<script> 
    $('#priceSelect').change(function(){ 
    $.ajax({ 
     url: "books", 
     type: "GET", 
     data: {sort: $('#priceSelect :selected').val()}, 
     success:function(ret){ 
     // new code; 
     var books = JSON.parse(ret); // Not sure if necessary or you can use 'ret'    
     var length = books.length; 
     var html = ""; 
     for (var i = 0; i < length; i++) { 
      html += "<div class='col-xs-12 selectable-card'>"; 
      html += "<a href='" + books[i].id + "'>" + books[i].name + "</a>"; 
      html += "</div>"; 
     } 
     $('.books-info').innerHTML = html 
     }, 
    }) 
    }); 
</script>