DartNyan DartNyan - 2 months ago 6
Ruby Question

Trying ajax in Rails

I'm trying to use Ajax in RoR.
Could you please tell me what am I doing wrong?

Controller:

def create
@post = Post.new(post_params)
respond_to do |format|
if @post.save
format.js
else
format.js
end
end
end


create.js.erb:

$('#post_title').value('');
$('#post_content').value('');
$('#my_posts').prepend('<%= j render @post %>');


index.html.erb:

<h1>New Post:</h1>

<%= simple_form_for @post, remote: :true do |f| %>
<div class="my_form">
<%= f.input :title %>
<%= f.input :content %>
<%= f.button :submit %>
</div>
<% end %>

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

<h1>Posts</h1>

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

<tbody id='my_posts'>
<%= render @posts %>
</tbody>
</table>


Unfortunately it doesn't work.
Please correct me or advise a good and simple tutorial.

UPD:

Started GET "/" for 127.0.0.1 at 2016-10-03 03:07:37 +0300
ActiveRecord::SchemaMigration Load (0.1ms) SELECT "schema_migrations".* FROM "schema_migrations"
Processing by PostsController#index as HTML
Rendering posts/index.html.erb within layouts/application
Post Load (0.1ms) SELECT "posts".* FROM "posts"
Rendered collection of posts/_post.html.erb [7 times] (1.5ms)
Rendered posts/index.html.erb within layouts/application (34.4ms)
Completed 200 OK in 269ms (Views: 257.9ms | ActiveRecord: 0.5ms)


Started POST "/posts" for 127.0.0.1 at 2016-10-03 03:07:44 +0300
Processing by PostsController#create as JS
Parameters: {"utf8"=>"✓", "post"=>{"title"=>"123", "content"=>"321"}, "commit"=>"Create Post"}
(0.1ms) begin transaction
SQL (0.2ms) INSERT INTO "posts" ("title", "content", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["title", "123"], ["content", "321"], ["created_at", 2016-10-03 00:07:44 UTC], ["updated_at", 2016-10-03 00:07:44 UTC]]
(143.9ms) commit transaction
Rendering posts/create.js.erb
Rendered posts/_post.html.erb (1.2ms)
Rendered posts/create.js.erb (2.5ms)
Completed 200 OK in 155ms (Views: 4.0ms | ActiveRecord: 144.1ms)

Answer

So your code looks fine except for these lines which need to be removed
$('#post_title').value('');
$('#post_content').value('');

I recreated the project and it worked when I removed those lines of code. Not sure why you need them in the first place because when you hit the create action, the javascript first renders @post which will create the HTML code for the newly created post object / (@post) using the post partial. And then finally that HTML code is prepended to the #my_posts element displaying the title and content of the new post so I'm not sure what those lines are supposed to accomplish. Hopefully that should solve the problem

Just in case, this is what my code looked like

test_app/app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @post = Post.new
    @posts = Post.all
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    respond_to do |format|
      if @post.save
        format.js
      else
        format.js
      end
    end
  end

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

test_app/app/views/posts/index.html.erb

<%= form_for @post, remote: :true do |f| %>
  <div class="my_form">
    <%= f.label :title %>
    <%= f.text_field :title    %>
    <%= f.label :contnet %>
    <%= f.text_field :content  %>
    <%= f.submit 'Submit' %>
  </div>
<% end %>

<h1>Posts</h1>

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

  <tbody id='my_posts'>
    <%= render @posts %>
  </tbody>
</table>

test_app/app/views/posts/_post.html.erb

<tr>
  <td>
    <%= post.title %>
  </td>
  <td>
    <%= post.content %>
  </td>
</tr>

test_app/app/views/posts/create.js.erb

$("#my_posts").prepend('<%= j render @post %>')