All threads / Use select_tag to link to customer show page

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Use select_tag to link to customer show page

John Stegman asked in Rails

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"
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,399+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.