Javascript redrawing table after getting response from Rails Ajax request

Question

EDIT:

I want my Index to change according to Price descending and Price ascending just like Amazon.

Right now, I send an ajax request to the site, with the new value of the select requesting the data. The site gets the data from database and sorts it.

How can my javascript get the sorted books response and redraw the cards in my index page?

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

Book 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>

And lastly my routes.rb

resources :books do
  resources :users
end

Answer 1

It's very simple do the following. There are better ways to do this but, for you following can be done with minimal logic changes, give your select an Id such as "sort"

@books = Book.order(price: sort_order.to_sym)

private

def sort_order
  return "Asc" if params[:sort].nil?
  return params[:sort] == "Price Descending" ? "Desc" : "Asc"
end

Answer 2

You can achieve this by the following code

def index
 @books = Book.all
 case params[:sort]
 when "Price Descending"
   @books.order(price: "DESC")
 when "Price Ascending"
   @books.order(price: "ASC")
 else
  # add the best results query here
 end
end

Please modify your script code to this

$( document ).ready(function() {
 $('#sort').change(function(){
  var sort = $('#sort :selected').val();
    $.ajax({
     url: "books/index",
     type: "GET",
     data: {sort: $('#sort :selected').val()},
    })
 });
});

Cheers!