PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, May 17, 2022

[FIXED] How to render partial on the same page after clicking on link_to with AJAX

 May 17, 2022     ajax, asynchronous, partial, ruby-on-rails     No comments   

Issue

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?


Solution

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 :

  1. Create a div that will contain the loaded data. In this case div#current_customer

  2. Add remote: true to your link :

    <td><%= link_to 'Show', customer, remote: true %></td>
    
  3. 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
    
  4. 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
    
  5. Create your show.js.erb view, which is going to handle the front-end changes when respond_to :jsis gonna be called (In this case triggered by remote: true)

  6. Tell show.js.erb what it must do (Replace #current_customer content with your partial, using the right @customer) :

customers/show.js.erb

$("#current_customer").html("<%= escape_javascript(render partial: 'customers/show', locals: { customer: @customer } ) %>");

customers/index.html.erb

Name Actions
<div id="current_customer"> # This will will contain the partial 
</div>


Answered By - Karim Mortabit
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © 2025 PHPFixing