Ruby on rails get mysql information depending on option value

Question

I am wondering how I should go about retrieving information from a mysql database associated with my ruby on rails app. When a user selects a product from the select box, I want to use the value of the selected option to retrieve the product's description and price from the database and then display it in a div. Using the following code:

    <select>
        <option value='1'>milk</option>
        <option value='2'>eggs</option>
        <option value='3'>butter</option>
    </select>
    <div id='product_description'></div>
    <div id='product_price'></div>

When a user selects eggs for example, the first div would read: 'chicken babies' and the second div would read: '$2.00'.

My select tag is also populated from the database, if that is important to know.

The code to populate the select:

    <select>
        <option>Select Add-on</option>
        <% for product in @products %>
        <option value="<%= product.id %>"><%= product.item %></option>
        <% end %>
    </select>

I am also using jquery.

I guess I was basically wondering if I should just use an ajax call or if there was some magic rails way to accomplish the task. If I need to use ajax, can I just do it all from the js.coffee file? I can't figure out how to get the selected options value passed on to another file to select the correct row from the products table.

You need to do Asynchronous Javascript eXecution (AJAX), can easily be done with jQuery binding the Change event on your select, contacting the serveur for the selected product_id and responds with a partial (or JSON, which is faster but needs to be handle on the client side to "parse" the response and update the view). — MrYoshiji
– MrYoshiji, Commented Jun 7, 2013 at 16:33
I can't figure out how to contact the server with the correct product id. Is there is a way for ajax to define a variable that equals $(this).options[selectedIndex].attr("value") and then pass that on to my server file? — notblakeshelton
– notblakeshelton, Commented Jun 7, 2013 at 17:20
You should use options_for_select to generate your options (apidock.com/rails/ActionView/Helpers/FormOptionsHelper/…) combined with a select_tag (api.rubyonrails.org/classes/ActionView/Helpers/…) to generate the select ;) To get the selected product's id, you can do: $(this).val() (jQuery) — MrYoshiji
– MrYoshiji, Commented Jun 7, 2013 at 17:32
ok thanks for the links. i understand how to acquire the value of the option, but how do i pass it on to another file? for example, in php, you use $_GET to acquire the variable passed. Is there something similiar for a ruby file? — notblakeshelton
– notblakeshelton, Commented Jun 7, 2013 at 18:04
in controller / view (where you receive a request): params[:id] (do raiser params to see what it contains) — MrYoshiji
– MrYoshiji, Commented Jun 7, 2013 at 18:36

Community · Accepted Answer · 2017-05-23 10:28:40Z

2

You should use options_for_select to generate your options: http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/

<%= options_for_select([["Dollar", "$"], ["Kroner", "DKK"]]) %>
#generates
<option value="$">Dollar</option>
<option value="DKK">Kroner</option>

Combined with a select_tag to generate the select: http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-select_tag

<% options = "<option>Red</option><option>Green</option><option>Blue</option>".html_safe %>
<%= select_tag "colors", options %>
<div id="product_details"></div>
#generates
<select id="colors" multiple="multiple" name="colors[]">
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>
<div id="product_details"></div>

In your case:

<% options = options_for_select(@products.map{ |product| [product.item, product.id] }) %>
<%= select_tag('product_search', options) %>

# jQuery
$('#product_search').bind('Click', function(e) {
  var selected_product_id = $(this).val();
  # Then call the Ajax
  $.ajax({url: '/products/details/' + selected_product_id, # URL to contact
          type: 'GET',
          success: function(data) {
                     $('#product_details').empty().append(data);
                   }
        });
});

This code will send a request at path '/products/details/:id' where :id represents the product's id (ProductsController#details).

Now you have to code the server side to handle the request, generate the HTML (or responds with JSON, faster but heavier to handle on the client side) and send a response.

About Ajax: Jquery, Ajax, Post Function, Rails

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jun 7, 2013 at 17:57

MrYoshiji

54.9k13 gold badges130 silver badges120 bronze badges

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

2 Comments

notblakeshelton Over a year ago

alright thanks so much for your help and quick response. i would upvote you, but i guess you need 15 rep. Thanks again.

notblakeshelton Over a year ago

i have implemented your code and it is working. Thanks, mate. May your sword stay sharp and your steed be quick.

Collectives™ on Stack Overflow

Ruby on rails get mysql information depending on option value

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related