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
– Jimmy Baker, Commented May 12, 2017 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
– fanta, Commented May 12, 2017 at 15:52
@SebastiánPalma here you can find my code github.com/engid87/books — engid87
– engid87, Commented May 12, 2017 at 17:18

hashrocket · Accepted Answer · 2017-05-12 17:00:13Z

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, 2017 at 17:00

answered May 12, 2017 at 16:38

hashrocket

2,2321 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MikeC · Accepted Answer · 2017-05-12 16:43:25Z

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, 2017 at 16:43

MikeC

4806 silver badges14 bronze badges

3 Comments

hashrocket Over a year ago

That's what the OP's code is doing. It's just doing it within the Rails domain.

MikeC Over a year ago

@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.

hashrocket Over a year ago

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.

Collectives™ on Stack Overflow

Show partial in the same page using ajax request

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related