using ajax in rails on select dropdown

Question

I want to know how to do the following with Ruby/Rails as an exercise.

index.html.erb

<div id="selectionsPane">
  <label for="bootChooserControl">Boot style:</label>&nbsp;
  <select id="bootChooserControl" name="bootStyle"></select>
</div>
  <div id="productDetailPane">
  </div>
</div>
<div>
  <label>Item name:</label> <%= @boot.name %>
</div>
...

boots.js

$(function() {

  $('#bootChooserControl').load('/fetch_boot_style_options');

  $('#bootChooserControl').change(function(event){
    $.get(
      '/fetch_product_details',
      {style: $(event.target).val()},
      function(response) {
        $('#productDetailPane').html(response);
        $('[value=""]',event.target).remove();
      }
    );
  });
});

boots_controller.rb

def fetch_product_details
  @boot = Boot.where(sku: params[:style])
  render layout: false
end

fetch_boot_style_options

<option value="">&mdash; choose a style &mdash;</option>
<% @boots.each do |boot| %>
  <option value="<%= boot.sku %>"><%= boot.name %></option>
<% end %>

So I want Item Name populated with the correct boot name from my database. First, how do I use the select method to build my select button the Rails way? Second, when the user selects a different item I want the productDetailsPane to update. I don't know what I need to add to make this code Rails/AJAX ready.

Community · Accepted Answer · 2017-05-23 12:08:08Z

1

Use collection_select or select_tag for select menu in Rails way.
For populating your panel on selection of an item, you can use AJAX calls. Here is some resource, which uses JQuery's $.ajax action to make the call and do something on successful execution. This is another detailed helpful answer to do similar task.

Good luck

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Dec 31, 2013 at 20:41

kiddorails

13k2 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Glaz Over a year ago

Why isn't my $('#productDetailPane').html(response); line working?

Mike Glaz · Accepted Answer · 2014-01-06 16:11:24Z

Inside boot.js take out the following line: $('#productDetailPane').html(response);

boots_controller.rb

def fetch_product_details
  @boot = Boot.where(sku: params[:style]).first
  respond_to do |format|
    format.js
  end
end

fetch_product_details.rb

$('#productDetailPane').html('<%= j render "product_details" %>');

_product_details.html.erb

<div>
  <label>Item name:</label> <%= @boot.name %>
</div>
<div>
  <label>SKU:</label> <%= @boot.sku %>
</div>
<div>
  <label>Height:</label> <%= @boot.height %>
</div>
<div>
  <label>Colors:</label> <%= raw @boot.colors %>
</div>
<div>
  <label>Lining:</label> <%= @boot.lining %>
</div>
<div>
  <label>Today's price:</label> <%=  number_to_currency(@boot.price) %>
</div>
<div>
  <label>Features:</label> <%= raw @boot.features %>
</div>
<div align="center">
  <% if params[:style] != 'default' %>
    <%= image_tag 'photos/' + @boot.sku.to_s + '.png' %>
  <% end %>
</div>

routes.rb

get '/fetch_boot_style_options' => 'boots#fetch_boot_style_options'
get '/fetch_product_details' => 'boots#fetch_product_details'

Collectives™ on Stack Overflow

using ajax in rails on select dropdown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related