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)
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, class: 'text' %>
<%= f.label :contnet %>
<%= f.text_field :content, class: 'text' %>
<%= 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 %>')
$('.text').val('')