I have a list of customers. Every customer has a link, which links to the customers page and displays his data.
I want to link to partial rendered on the same page below the table of customers. On initializing the "page" with the table, a blank page with something like "select a customer" should be loaded.
My code for the Customers list:
<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 %></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>
<br>
<%= link_to 'New Customer', new_customer_path, class: "button", id: "new_customer" %>
My partial for displaying the customer:
<p>
<strong>Name:</strong>
<%= @customer.name %>
<%= @customer.id %>
</p>
<%= link_to 'Edit Customer', edit_customer_path(@customer) %> |
<%= link_to 'Back', customers_path %>
Can you help me with some ideas?
You could render the page before hand, but within a hidden div, or you could use AJAX to load it after the click. To do this you'd create an ActionResult in a controller which renders the partial.
Render Partial View Using jQuery in ASP.NET MVC We can load our partial view using jQuery load method. It makes ajax request to controller action method and load output in HTML control like div. Add div in index.cshtml file as shown in below and add a script to load output of action method GetProducts.
We can load our partial view using the jQuery load method. It makes ajax requests to controller action method and load output in HTML control like div. Add div in the index.cshtml file as shown below and add a script to load output of action method GetProducts.
Partial Page Updates. Perhaps the most visible feature of the ASP.NET AJAX Extensions is the ability to do a partial or incremental page updates without doing a full postback to the server, with no code changes and minimal markup changes.
You basically want to use AJAX to display a customer's details. For this you can use the remote: true
option provided by rails for the link_to
helper. What we are going to do next :
Create a div that will contain the loaded data. In this case div#current_customer
Add remote: true
to your link :
<td><%= link_to 'Show', customer, remote: true %></td>
Name your partial customers/_show.html.erb
(don't forget the _
so it can be called as a partial) :
<p>
<strong>Name:</strong>
<%= @customer.name %>
<%= @customer.id %>
</p>
<%= link_to 'Edit Customer', edit_customer_path(@customer) %> |
<%= link_to 'Back', customers_path %> # You should remove this link
Respond to Javascript in the show
method in CustomersController
:
respond_to do |format|
format.js {render layout: false} # Add this line to you respond_to block
end
Create your show.js.erb
view, which is going to handle the front-end changes when respond_to :js
is gonna be called (In this case triggered by remote: true
)
Tell show.js.erb
what it must do (Replace #current_customer
content with your partial, using the right @customer
) :
$("#current_customer").html("<%= escape_javascript(render partial: 'customers/show', locals: { customer: @customer } ) %>");
<div id="current_customer"> # This will will contain the partial
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With