Rails - 提交表單後AJAX加載帖子

我在通過AJAX提交文章後加載/填充視圖時遇到問題。表單本身正在發射並將帖子插入到數據庫中。爲了更加清楚，我需要在JQuery slideDown的帖子下面的容器中提交後加載帖子。我有一個普通的帖子/共享帖子/評論帖子，在索引操作中也進行了部分渲染。Rails - 提交表單後AJAX加載帖子

index.html.erb

<div class="col-md-5"> 
     <div class="posts-feed-bg"> 
     <div id="post-index-form"> 
      <%= render 'posts/form' %> 
     </div> 
     <div class="post-textarea-bottom-border"></div> 
     <div class="post-feed-container" id="posts-items"> 
      <% @posts.each do |post| %> 
       <%= render partial: "posts/#{post.post_type}", locals: {post: post} %> 
      <% end %> 
     </div> 
     </div> 
    </div>

create.js.erb

<% if @post.save 
     @post = Post.new 
%> 
    $('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>'); 
    $('#post-text-area').val(''); 
    $('#post-items').html('<%= escape_javascript(render 'posts/post') %>'); 
    $('#post-items').slideDown(350); 
    <% end %>

_post.html.erb

<div class="post-container"> 
    <%= post.user.username %> 
    <%= link_to post.title, post %> 
    <%= post.body %> 
    </div>

posts_controller.rb

def index 
     following_ids = current_user.following_users.map(&:id) 
     following_ids << current_user.id 
     @posts = Post.where(user_id: following_ids).order('created_at DESC').paginate(page: params[:page]) 
     @users = User.same_background_focus_as(current_user).paginate :page => params[:page], :per_page => 5 
     @post = Post.new 
     end 

def create 
    @post = current_user.posts.build(post_params) 

    respond_to do |format| 
     if @post.save 
     format.html { redirect_to @post, notice: 'Post was successfully created.' } 
     format.json { render :show, status: :created, location: @post } 
     format.js 
     else 
     format.html { render :new } 
     format.json { render json: @post.errors, status: :unprocessable_entity } 
     end 
    end 
    end

_form.html.erb

<div class="container"> 
    <%= simple_form_for(@post, id: '', multipart: true, remote: true) do |f| %> 
     <%= f.error_notification %> 
     <div class="row"> 
      <div class="col-6 emoji-picker-container post-textarea"> 
      <%= f.input :body_text, class: 'form-control', label: false, id: 'post-text-area' %> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-5"> 
      <%= f.button :submit, class: 'btn btn-outline-success' %> 
      </div> 
     </div> 
    <% end %> 
</div>

服務器日誌提交表單

Started POST "/posts" for 127.0.0.1 at 2017-08-16 13:25:25 -0400 
Processing by PostsController#create as JS 
    Parameters: {"utf8"=>"âœ「", "post"=>{"body_text"=>"AJAX"}, "commit"=>"Create Post"} 
    User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 4], ["LIMIT", 1]] 
    (1.0ms) BEGIN 
    SQL (174.6ms) INSERT INTO "posts" ("body_text", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id" [["body_text", "AJAX"], ["user_id", 4], ["created_at", "2017-08-16 17:25:26.201583"], ["updated_at", "2017-08-16 17:25:26.201583"]] 
    (0.5ms) COMMIT 
    Rendering posts/create.js.erb 
    (1.0ms) BEGIN 
    (0.0ms) COMMIT 
    Rendered posts/_form.html.erb (8.0ms) [cache miss] 
    Rendered posts/_post.html.erb (1273.9ms) 
    Rendered posts/create.js.erb (1366.9ms) 
Completed 500 Internal Server Error in 2282ms (ActiveRecord: 178.1ms) 



ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x18937128>:0x1a9f6688> 
Did you mean? @post 
       post_url): 
    2: <div class="media" style="padding-bottom: 2em;"> 
    3:  <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/60x60"> 
    4:  <div class="media-body post-user-name"> 
    5:  <h5><%= fa_icon 'user' %> <%= post.user.user_full_name %><%= link_to 'Delete', post_path(post), remote: true, method: :delete, data: {confirm: "You sure?"} if current_user == post.user %> </h5> 
    6:  <p><%= post.body_text %> </p> 
    7:  </div> 
    8: </div> 

app/views/posts/_post.html.erb:5:in `_app_views_posts__post_html_erb__960034244_222460104' 
app/views/posts/create.js.erb:9:in `_app_views_posts_create_js_erb__1048995870_223328388'

新的錯誤進行更改後

ActionView::Template::Error (undefined method `user_full_name' for nil:NilClass): 
    2: <div class="media" style="padding-bottom: 2em;"> 
    3:  <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/60x60"> 
    4:  <div class="media-body post-user-name"> 
    5:  <h5><%= fa_icon 'user' %> <%= post.user.user_full_name %><%= link_to 'Delete', post_path(post), remote: true, method: :delete, data: {confirm: "You sure?"} if current_user == post.user %> </h5> 
    6:  <p><%= post.body_text %> </p> 
    7:  </div> 
    8: </div> 

app/views/posts/_post.html.erb:5:in `_app_views_posts__post_html_erb__960034244_199162944' 
app/views/posts/create.js.erb:9:in `_app_views_posts_create_js_erb__1048995870_199612656'

方法用於局部視圖換 post.rb後

def post_type 
    if post_id? && body_text? 
     "quote_share" 
    elsif post_id? 
     "share" 
    else 
     "post" 
    end 
    end

來源

2017-08-16 Johnny C

問題是你引用了id錯誤。您已經定義了div與id爲posts-items，但在create.js.erb您使用post-items這是不正確，所以JS無法找到與post-items選擇這是問題的原因。將其更改爲posts-items應該可以解決您的問題。

#create.js.erb 
<% if @post.save 
    @post = Post.new 
%> 
    $('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>'); 
    $('#post-text-area').val(''); 
    $('#posts-items').html('<%= escape_javascript(render 'posts/post') %>'); 
    $('#posts-items').slideDown(350); 
<% end %>

此外，這部分代碼。

<% if @post.save 
    @post = Post.new 
%>

看起來很奇怪。除非有用處，否則我不會在create.js.erb之內看到任何理由。因此將其刪除

#create.js.erb 
$('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>'); 
$('#post-text-area').val(''); 
$('#posts-items').html('<%= escape_javascript(render 'posts/post') %>'); 
$('#posts-items').slideDown(350);

更新：

::的ActionView ::模板錯誤（＃<＃<類未定義的局部變量或方法'後」：0x18937128>：0x1a9f6688>

在這種情況下，無法找到_post.html.erb中定義的post變量的路徑。將其作爲局部變量在部分。最後create.js.erb想這

#create.js.erb 
$('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>'); 
$('#post-text-area').val(''); 
$('#posts-items').html('<%= escape_javascript(render 'posts/post', post: @post) %>'); 
$('#posts-items').slideDown(350);

此外，在form改變@post到Post.new，所以它不會在create行動@post衝突，一定要建立一個新的實例形式

<%= simple_form_for(Post.new, id: '', multipart: true, remote: true) do |f| %>

ActionView :: Template :: Error（未定義方法`user_full_name'爲 nil：NilClass）

這個錯誤是因爲特定職位沒有相關的用戶，因此它的錯誤出在這一行<%= post.user.user_full_name %>迅速解決錯誤，使用try方法

<%= post.try(:user).user_full_name %>

來源

2017-08-16 16:47:13 Pavan

什麼也沒有發生。創建方法正常工作。但是，我必須刷新頁面才能看到帖子。即使我做出了您所要求的更改，slideDown效果仍未觸發。 –

@JohnnyC您可以使用已解僱的服務器日誌更新問題嗎？ – Pavan

我添加了<％if @ -post.save @ -post = Post.new％>來刷新表單。它沒有它就進入更新操作。 –

Rails - 提交表單後AJAX加載帖子

回答

相關問題