接收动作::模板::使用图像AJAX提交表单后出现错误acts_as_votable

时间:2017-08-20 18:09:05

标签: javascript ruby-on-rails ajax carrierwave acts-as-votable

我遇到的问题是,只包含body_text时表单才会提交。但是,当包含图像时,表单将不会提交。我目前正在使用remotipart,acts_as_votable和carrierwave。这个问题似乎围绕着acts_as_votable路线。我在下面显示了。如何在使用AJAX时将部分表单包含在图像中?

在控制台

中显示错误
Started POST "/posts" for 127.0.0.1 at 2017-08-20 15:29:00 -0400
Processing by PostsController#create as JS
  Parameters: {"utf8"=>"✓", "post"=>{"body_text"=>"Photo", "post_photo"=>#<ActionDispatch::Http::UploadedFile:0x4b4e7f8 @tempfile=#<Tempfile:C:/Users/John/AppData/Local/Temp/RackMultipart20170820-10496-jajixx.JPG>, @original_filename="IMG_0110.JPG", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"post[post_photo]\"; filename=\"IMG_0110.JPG\"\r\nContent-Type: image/jpeg\r\n">}, "commit"=>"Create Post"}
  User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 5], ["LIMIT", 1]]
   (0.0ms)  BEGIN
   (0.0ms)  ROLLBACK
  Rendering posts/create.js.erb
  Rendered posts/_post.html.erb (118.8ms)
  Rendered posts/create.js.erb (212.6ms)
Completed 500 Internal Server Error in 3660ms (ActiveRecord: 0.0ms)


ActionView::Template::Error (No route matches {:action=>"like", :controller=>"posts", :id=>nil}, missing required keys: [:id]):
     9:   <div class="post-container-charm-bar">
    10:     <ul>
    11:       <li class="votes" id="#post_<%= post.id %>">
    12:         <%= link_to like_post_path(post), style: 'text-decoration: none', class: 'like-btn', method: :put, remote: true do %>
    13:               <p id="thumb-id" class="thumbs-up">b</p>
    14:         <% end %>
    15:       </li>

app/views/posts/_post.html.erb:12:in `_app_views_posts__post_html_erb__907999817_40537128'
app/views/posts/create.js.erb:1:in `_app_views_posts_create_js_erb___754512395_40214292'

的routes.rb

resources :posts do
  member do
    post :share
    put 'like', to: 'posts#like'
  end
end

create.js.erb

$("#container_posts").prepend("<%= j render partial: "posts/#{@posts.posts_type}", locals: {posts: @posts } %>");
$("#posts_<%= @posts.id %>").hide().fadeIn(1000);
$("#text-area-reset").val('');

destroy.js.erb

$("#post_<%= @post.id %>").fadeOut("slow", function(){
          $(this).remove();
});

发布_form.html.erb

<div class="container">
    <%= simple_form_for(@post, multipart: true, remote: true) do |f| %>
        <%= f.error_notification %>
        <div class="row">
          <div class="col-6 post-textarea">
            <p class="emoji-picker-container">
              <%= f.input :body_text, as: :text, class: 'form-control post-placeholder', label: false, id: 'text-area-reset', placeholder: 'Write a new post' %>
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-5">
            <%=  f.button :submit, class: 'form-control btn btn-outline-success' %>
          </div>
          <div class="col-4">
            <h6>Add a Photo</h6>
            <%= f.file_field :post_photo %>
            <% if f.object.post_photo? %>
            <%= image_tag f.object.post_photo.feed_preview.url %>
                <%= f.label :remove_image %>
                <%= f.check_box :remove_image %>
                <% end %>
          </div>
        </div>
    <% end %>
</div>

posts_controller.rb

# Acts_as_votable
def like
  @post = Post.find(params[:id])
  if !current_user.liked? @post
    @post.liked_by current_user
  elsif current_user.liked? @post
    @post.unliked_by current_user
  end

_post.html.erb

<div class="post-container" id="post_<%= post.id %>">
  <div class="media" style="padding-bottom: 2em;">
    <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/60x60">
    <div class="media-body post-user-name">
      <h5><%= fa_icon 'user' %> <%= post.user.user_full_name %></h5>
      <p><%= content_with_emoji(post.body_text) %> </p>
    </div>
  </div>
  <div class="post-container-charm-bar">
    <ul>
      <li class="votes" id="#post_<%= post.id %>">
        <%= link_to like_post_path(post), style: 'text-decoration: none', class: 'like-btn', method: :put, remote: true do %>
              <p id="thumb-id" class="thumbs-up">b</p>
        <% end %>
      </li>
      <li><strong class="likes-count"><%= number_with_delimiter(post.get_likes.size) %></strong></li>
      <li><%= link_to '#', data: {toggle: "modal", target: "#commentmodal"} do %> <%= image_tag 'post/chat-state-1-30x30.png' %>
        <% end %></li>
      <li><strong><%= post.comment_threads.size %></strong></li>
      <li><%= link_to share_post_path(post), method: :post if user_signed_in? && post.user_id != current_user.id do %><%= image_tag 'post/share-state-1-30x30.png' %>
        <% end %></li>
      <li><%= link_to post, style: 'text-decoration: none;' do %><%= image_tag 'post/opened-eye-state-1-30x30.png' %>
        <% end %></li>
      <li><%= link_to edit_post_path(post), style: 'text-decoration: none;' do %><%= image_tag 'post/edit-state-1-30x30.png' %>
        <% end %> </li>
      <li>
        <% if current_user == post.user %> <%= link_to post_path(post), style: 'text-decoration: none;', remote: true, method: :delete, data: {confirm: 'Are you sure?'} do %><%= image_tag 'post/garbage-state-1-30x30.png', class: 'trash-can-icon' %>
            <% end %>
        <% end %></li>
    </ul>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

我使用了错误的表单扩展方法。现在,它与下面的小变化完美配合。

 <%= f.input :post_photo, as: :file, label: false %>