在Rails中尝试Ajax

Question

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 1

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('')