Show partial in the same page using ajax request

Question

I'm new to rails and i'm trying to do a simple project for school.

I have generated a scaffold as follows to begin.

rails generate scaffold Book title:string content:text code:string

What I'm trying to do, is to display a list of the books id's in a div on the same page (localhost:3000/books) when I click on a link. I tried to follow this procedure but it doesn't seem to work, nothing is visibly rendered on the page when I click the link at the end of the /books page

Here is my books/index.html.erb

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

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th>Code</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= book.code %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

<br>

<%= link_to 'All books', books_path, remote: true %>
<br>
<br>
<div id="content" >
</div>

my books_controller's index method

def index
    @books = Book.all

    respond_to do |format|
      format.html
      format.js
    end
  end

the _books partial

<% @books.each do |book| %>
    <div class="book">
      <%= book.id %>
    </div>
<% end %>

and the books/index.js.erb

$("#content").html("<%= j (render 'books') %>");

When I click on the link that should render the partial, I get this in the terminal and nothing is displayed on the page.

Started GET "/books" for 127.0.0.1 at 2017-05-12 17:35:02 +0200
Processing by BooksController#index as JS
  Rendering books/index.js.erb
  Book Load (0.3ms)  SELECT "books".* FROM "books"
  Rendered books/_books.html.erb (2.4ms) [cache miss]
  Rendered books/index.js.erb (3.9ms)
Completed 200 OK in 8ms (Views: 6.0ms | ActiveRecord: 0.3ms)

I imagine I am missing something, but I really can't figure out why. Any ideas? thank you

PS: Rails version: 5.1.0 and ruby 2.4.0

Open your browser console and click the link. You should see a request get triggered. What is the response of that request? — Jimmy Baker, May 12 '17 at 15:48
I do not see a div/container with `id=content`, so, I guess things are not getting replaced because there's no container with that id. — fanta, May 12 '17 at 15:52
@SebastiánPalma here you can find my code https://github.com/engid87/books — engid87, May 12 '17 at 17:18

hashrocket · Accepted Answer · 2017-05-12T17:00:13.523

1

Rails 5.1 doesn't have a dependency on jQuery. This code:

$('#content').html("<%= j (render 'books') %>");

is jQuery code. If you add the jquery-rails gem and follow the documentation, your code should work.

edited May 12 '17 at 17:00

answered May 12 '17 at 16:38

hashrocket

2,210
1
16
25

score 0 · Answer 2 · answered May 12 '17 at 16:43

0

I'm not sure where the problem lies with your code but I can suggest what, to me, is a more elegant alternative. I suggest binding a jquery onClick handler to your link and have it perform an ajax request to the server - either to a different view or re-code the same view - that sends back a json object containing all of your data the ajax success handler can then manipulate the html within the page. Something like this:

$("#all_books_link").click(function() {
  $.ajax({
     dataType: "json",
     url: <PUT ALL BOOKS SERVER URL HERE>,
     success:function(data) {
        for (var key in data) {
           $("#content").append("<div>"+data[key]+"</div>"
        }
     }
   });
});

Your server-side rails function should return a json object, not actual HTML.

answered May 12 '17 at 16:43

MikeC

480
6
14

That's what the OP's code is doing. It's just doing it within the Rails domain. – hashrocket May 12 '17 at 17:03
@InEptSoftware, his solution returns HTML via a rails partial and executes a javascript loaded via a separate file. This seems pretty dirty to me. I'd rather have the server just send a json object and let the jquery and other javascript live in the client right from the initial page load. To each his own, I guess. – MikeC May 12 '17 at 17:15
I understand your thought process, but the OP says he is new to Rails. I think it's much easier for him to use Rails convention over configuration at this point. I do like your answer though. – hashrocket May 12 '17 at 17:23

Show partial in the same page using ajax request

2 Answers2

Linked