Rails 4: Render partial in div after submit button click - ruby-on-rails

Question

I'm not getting it. I'm building a rails application and want to do some single page actions. What I got from now is, when a I pick a 'customer' from the list on the customers/index.html.erb, I render it in the 'current_customer' div. When I click on edit, the form is rendered in the 'current_customer' - perfect. But when I click on sumbit on the form, I get an error (which I understand) 'ActionController::UnknownFormat' because of the action oin the controller for 'show'. I'm routed to 'http://localhost:3000/customers/2'
What I want to is to route to 'http://localhost:3000/customers' after clikcing sumit and the render the cutomers/_show.html.erb in the 'current_customer' div.
My Code:
customers/index.html.erb
<h1>Listing Customers</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<% #customers.each do |customer| %>
<tr>
<td><%= customer.name %></td>
<td><%= link_to 'Show', customer, remote: true %></td>
<td><%= link_to 'Edit', edit_customer_path(customer), remote: true %></td>
<td><%= link_to 'Destroy', customer, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<div id="current_customer"></div>
<br>
<%= link_to 'New Customer', new_customer_path, class: "button", id: "new_customer" %>
customers/_show.html.erb
<p>
<strong>Name:</strong>
<%= #customer.name %>
<%= #customer.id %>
</p>
<%= link_to 'Edit Customer', edit_customer_path(#customer) %> |
customers/_edit.html.erb
<h1>Editing Customer</h1>
<%= render 'form' %>
<%= link_to 'Show', #customer %> |
customers/_form.html.erb
<%= form_for(#customer) do |f| %>
<% if #customer.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#customer.errors.count, "error") %> prohibited this customer from being saved:</h2>
<ul>
<% #customer.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="actions">
<%= f.submit id: "customer_button", remote: true %>
</div>
<% end %>
customers/edit.js.erb
$("#current_customer").html("<%= escape_javascript(render partial: 'customers/edit', locals: { customer: #customer } ) %>");
customers_controller.rb (partly)
def show
respond_to do |format|
format.js {render layout: false}
end
end
# GET /customers/new
def new
end
# GET /customers/1/edit
def edit
respond_to do |format|
format.js {render layout: false}
end
end
def update
respond_to do |format|
if #customer.update(customer_params)
format.html { redirect_to #customer, notice: 'Customer was successfully updated.' }
format.json { render :show, status: :ok, location: #customer }
else
format.html { render :edit }
format.json { render json: #customer.errors, status: :unprocessable_entity }
end
end
end
I'd be glad for every help!
Thanks

Answer 1

You need to put remote: true in form_for tag instead of submit button, add it here
<%= form_for #customer, remote: true do |f| %>
Remove it from
<%= f.submit id: "customer_button" %>
Also, update action should accept AJAX requests too, create update.js.erb template and handle the AJAX request as you are submitting the form using remote: true
Hope that helps!

Answer 2

Submitting you form as is will call POST /customer/1. You need to defined an update method in your controller and routes, and add method: :patch to your form to achieve a PATCH /customer/1.
Also, you might want to defined a update.js.erb and add remote: true to your form to add some dynamic AJAX.

Answer 3

you can replace your show link by this:
<%= link_to "show", {:action => :show}, :remote => true %>
or
<%= link_to "show", customer_path(customer), :remote => true %>