Skip to main content

Use select_tag to link to customer show page

Rails • Asked by John Stegman

I'm converting a MS access databse to Rails. The database has a customer table of over 5,000 customers. I have imprted the customer table from the Acces db into the Rails postgres db.

I can use the index view to see the customer list and access the show, edit or delete options - code below.

To replace the table in the index view, I've created a dropdown list that will list the customers alphabetically by last name and allow the user to select the customer. I am unable however to get the app to perform the action I want - render the customer show page.

How does one get a dropdown box to intiate the rendering of the show page for the selected customer?

My code so far for the customer index page. I left the table portion in but obviously that's what I want the dropdown box to replace.

<p id="notice"><%= notice %></p>

<h1>Customers</h1>
<%= select_tag 'cust_id', options_for_select(@customers.by_last_name.collect{ |c| [c.last_name, c.first_name, c.id]}) %>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @customers.each do |customer| %>
      <tr>
        <td><%= customer.id %></td>
        <td><%= customer.first_name %></td>
        <td><%= customer.last_name %></td>
        <td><%= link_to 'Show', customer %></td>
        <td><%= link_to 'Edit', edit_customer_path(customer) %></td>
        <td><%= link_to 'Destroy', customer, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New Customer', new_customer_path %>

where is your javascript code? or loading the data using ajax? especially if you're displaying it on the index page it'll be done via ajax.


Sorry - relatively new to this process.
I assume you are suggesting some javascript code but am not too familar with the process I need to implement.

I'd appreciate any help you can provide.


Sorry at work so I'll kinda explain - but you have to go through the rails guides to better understand how to use ajax / json etc to display data (via javascript).

In your index.html.erb you want to display a record based on what you select from the drop down. so something I have used in the past is where I have a table of all the users (not a drop down) and then a card on the side that is fixed on the page and when I click on the table row it will update the card with the content. You would have to write js to get the value that was selected from the dropdown, get that data's info and then display it.

Here is a gist of stuff I have used before: https://gist.github.com/tabishiqbal/583d4ab9d3db24b4b8bd4c98fc3f1e51


Thanks, Tabish - that is very helpful. I have studeied you code and it allowed me to understnd the need for a javascript portion to be added to the index page. Following is what I have done:

Set up a select_tag

<%= select_tag( "cust_id", options_from_collection_for_select(@customers.by_last_name, :id, :last_name, (@customers_id.nil?) ? nil : @customers_id), {:class => 'custTag'}) %> 

Set up a javascript on change listener for the select tag dropdown

$(document).ready
$(document).on('change', '.custTag', function(){
    var custId = $(this).val();
    alert (custId);
    $.get('/customers/custId');

});

Selecting a line in the dropdown gives the alert with the proper id for the line selected but causes the following server response:

Started GET "/customers/custId" for 73.183.17.149 at 2017-06-07 20:46:13 +0000
Processing by CustomersController#show as /
Parameters: {"id"=>"custId"}
Customer Load (0.6ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = $1 LIMIT $2 [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 4ms (ActiveRecord: 0.6ms)

ActiveRecord::RecordNotFound (Couldn't find Customer with 'id'=custId):

Trying the direct method – entering a customer id into javascript

$(document).ready
$(document).on('change', '.custTag', function(){
var custId = $(this).val();
alert (custId)
$.get('/customers/6559');
});

I get the following server response – note the line Processing by CustomersController#show as */*

Started GET "/customers/6559" for 73.183.17.149 at 2017-06-07 20:34:21 +0000
Processing by CustomersController#show as /
Parameters: {"id"=>"6559"}
Customer Load (0.9ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = $1 LIMIT $2 [["id", 6559], ["LIMIT", 1]]
Equipment Load (12.6ms) SELECT "equipment".* FROM "equipment" WHERE "equipment"."customer_id" = 6559
Rendering customers/show.html.erb within layouts/application
Rendered collection of equipment/_equipment.html.erb 4 times
Rendered customers/show.html.erb within layouts/application (18.4ms)
Completed 200 OK in 655ms (Views: 628.3ms | ActiveRecord: 13.5ms)

However, nothing is rendered in the browser

Entering the customer id directly in the browser address bar (customers/6559) produces the desired result

Started GET "/customers/6559" for 73.183.17.149 at 2017-06-07 20:51:27 +0000
Processing by CustomersController#show as HTML
Parameters: {"id"=>"6559"}
Customer Load (0.9ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = $1 LIMIT $2 [["id", 6559], ["LIMIT", 1]]
Equipment Load (0.8ms) SELECT "equipment".* FROM "equipment" WHERE "equipment"."customer_id" = 6559
Rendering customers/show.html.erb within layouts/application
Rendered collection of equipment/_equipment.html.erb 4 times
Rendered customers/show.html.erb within layouts/application (5.7ms)
Completed 200 OK in 616ms (Views: 606.1ms | ActiveRecord: 1.7ms)

My goal is to click on the line in the select dropdown, pass the custId to the controller show action and have the page be rendered.

Am I making any progress?

Thanks for any help you can give


Sorry at work again but it's hitting your show action in the controller. In there it will redirect to the page where the customer is. You need it to render json? Would be easier if you can gist your code


I'd like it to render HTML, just like the rendering I receive when I input the user id in the browser adress bar.
As I tried to show above, I am having two problems:

  1. Can't seen to pass the custId to the url in the jquery line - get the error that the server couldn't find the customer - ActiveRecord::RecordNotFound (Couldn't find Customer with 'id'=custId):
    jquery code is

    $(document).ready
    $(document).on('change', '.custTag', function(){
    
    var custId = $(this).val();
    alert (custId);
    $.get('/customers/custId');
    

});

3. 2. When I input the customer id into the code directly, I get a mesage from the server - "Processing by CustomersController#show as  */*"  instead of the usual "Processing by CustomersController#show as HTML"

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.