2016-10-02 1 views
1

私はRoRでAjaxを使用しようとしています。 私は何を間違えているのか教えてください。RailsでAjaxを試す

コントローラー:

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:

​​3210

残念ながら、それは動作しません。 私を訂正してください、または良いと簡単なチュートリアルに助言してください。

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) 
+1

ファイルですが、それらは '$' –

+0

@ Koenでなければなりません。ありがとうございますが、動作しません。 :c –

+0

@DartNyanはうまくいくようですが、yrサーバーのログにリクエストを投稿することができます – 7urkm3n

答えて

1

だからあなたのコードは、私はプロジェクトを再作成し、私はそれらの行を削除するとき、それが働いた
$('#post_title').value('');
$('#post_content').value('');

を削除する必要があり、これらの行を除いて正常に見えますコード。なぜあなたが最初にそれらを必要としているのかわからないのは、createアクションを実行したとき、javascriptはpost partialを使用して新しく作成されたpost object/(@post)のHTMLコードを作成する@postをレンダリングするためです。最後に、titlecontentの新しいpostを表示している#my_posts要素の前にHTMLコードが追加されているため、その行が何を達成するはずかわかりません。うまくいけば、それは念のために、これは私のコードは

TEST_APP /アプリ/コントローラ/ 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 /アプリ/ビュー/のように見えたものです問題

を解決する必要がありますポスト/ 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 /アプリ/ビュー/記事/ _post.html.erb

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

TEST_APP /アプリ/ビュー/記事/ create.js.erbあなたのJSに `#`を使用し

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

男、とても感謝しています。これは '$( '#post_title')のために起こりました。 $( '#post_content')。値( ''); ' –

+0

投稿を作成した後に入力内容をクリアしたいと思います。どうしたらいいですか? –

+0

あなたは投稿を提出した後にそれらをクリアする必要があります。このアプリを再作成したとき、私のテキストフィールドは投稿後に明らかになりました。あなたは私のコードをチェックすることができますが、これを引き起こす可能性のある他のjavascriptファイルがあるのか​​どうかはわかりませんが、提出後にテキスト入力をクリアするのが理想です。私は 'simple_form_for'を使ったことはありませんが、' form_for'を使って違いがあるかどうかを調べることができます。私が今見ている最初の違いは、そこからデバッグを開始できるようにすることです。それでも問題が解決しない場合は、 –