2016-07-27 4 views
0

私のレールアプリでajaxを使用してコメントを表示しようとしていますが、ページがリダイレクトされた直後にコメントが表示されない...コメントが正常に作成される問題はajaxとjqueryでコメントを表示することです!!!! 私は私のapplication.html.erbにこのラインを持っている:コメントはレールにajaxで表示されない

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 

、これが私のapplication.jsの行が必要です:

:ここ
//= require jquery 
//= require jquery_ujs 

は、ポストの下で私のshow.html.erbファイルです部分的
<div id="posts" class="transitions-enabled"> 
    <div class="box panel panel-default"> 
    <%= render 'post', post: @post %> 
    </div> 
</div> 

私_POST:

<div class="panel-body"> 
    <%= link_to image_tag(post.user.avatar.url, size: "50x50", class: "img-circle"), profile_path(post.user.user_name) %> 
    <ul class="posts-shows"> 
    <li><strong><%= link_to post.user.user_name, profile_path(post.user.user_name) %></strong></li> 
    <li><small><%= link_to "#{time_ago_in_words(post.created_at)} ago", post_path(post), class: "time-link" %></small></li> 
    </ul> 
    <p class="disc-posts"><%= post.description %></p> 
    <%= link_to image_tag(post.image.url(:large), class: "img-responsive img-in") %><br/> 
    <% if post.user == current_user %> 
    <div><%= link_to "Edit", edit_post_path(post) %> | <%= link_to "delete", post, method: :delete, data: {confirm: "Are you sure?"} %> </div> 
    <% else %>        
    <div><%= link_to "Repost", repost_post_path(post), method: :post, data: { confirm: "Are you sure?"} if user_signed_in? %></div>     
    <% end %> 
</div> 

<div class="panel-footer"> 
    <div class="comment-form"> 
    <%= form_for([post, post.comments.build], remote: true) do |f| %> 
     <%= f.text_field :content, placeholder: 'Add a comment...', class: "form-control comment_content", id: "comment_content_#{post.id}" %> 
    <% end %> 
    </div> 
    <div class="comments" id= "comments_#{post.id}"> 
    <% if post.comments.present? %> 
     <%= render post.comments, post: post %> 
    <% end %> 
    </div> 
</div> 
コメントフォルダ内の

私_comment.html.erb:

<% if comment.user_id.present? %> 
    <div id="comment"> 
    <%= link_to image_tag(post.user.avatar.url, size: "30x30", class: "img-circle img-comments"), profile_path(comment.user.user_name) %> 
    <div class="user-name"> 
     <%= link_to comment.user.user_name, profile_path(comment.user.user_name), class: "username-size" %> 
    </div> 
    <div class="comment-content"> 
     <%= comment.content %> 
    </div> 
    </div> 
<% end %> 

、ここでコメントフォルダの下create.js.erbです:

$('#comments_<%= @post.id %>').append("<%=j render 'comments/comment', post: @post, comment: @comment %>"); 
$('#comment_content_<%= @post.id %>').val('') 

と私のコメントコントローラ:

class CommentsController < ApplicationController 
    before_action :set_post 

    def index 
    @comments = @post.comment.all 
    end 

    def new 
    @comment = @post.comments.build(comments_params) 
    end 

    def create 
    @comment = @post.comments.build(comments_params) 
    @comment.user_id = current_user.id 

    if @comment.save 
     respond_to do |format| 
      format.html { redirect_to root_path } 
      format.js 
     end 
    else 
     flash[:alert] = "Check the comment form, something went horribly wrong." 
     render root_path 
    end 
    end 


    def destroy 
    @comment = @post.comments.find(params[:id]) 

    @comment.destroy 
    flash[:success] = "Comment deleted :(" 
    redirect_to root_path 
    end 

    private 

    def comments_params 
    params.require(:comment).permit(:content) 
    end 

    def set_post 
    @post = Post.find(params[:post_id]) 
    end 
end 
+0

この方法でデバッグできます。 chrome - inspect>ネットワークで要求を提出し、応答を注意深く見てください。コンソールでレスポンスを再試行して、javascriptの動作を確認することができます。 – Swards

+0

私はクロムのネットワークとコンソールに精通していません。しかし、ええ、それは学ぶのは良いことです..私は間違いなくそのためのいくつかのYouTubeのビデオをチェック...ありがとう – sam0101

+0

あなたの探しているもの:https:// developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en – Swards

答えて

1

私はこの行が正しいとは思わない -

<div class="comments" id= "comments_#{post.id}"> 

あなたはこれが必要だと思います。

<div class="comments" id= "comments_<%= post.id %>"> 
+0

ええ、今レンダリング中ですが、別の問題が発生します...投稿にコメントを投稿するとindex私のフッターはパネルの下にあります...しかし、リダイレクトすると問題が解決します...だから、まだAjaxに問題があります...あなたはこれのための解決策を知っていますか? – sam0101

+0

の前に私はあなたの助けに感謝したい;) – sam0101

+0

それはあなたのCSSかもしれません。 Chromeの点検がここでも役立ちます。要素とそのスタイル規則を見ることができます。フッタがポストの上にくる理由はたくさんあります。石積みを使用していますか?再ロードする必要があるかもしれません(もしあれば、masonryのreloadメソッドを参照してください)。 – Swards

関連する問題