Question

在我的rails4中，我想通过AJAX提交一份表格，该表格上传了一个通过 carrierwave 上传的文件。据我所知，可以通过 remotipart 来完成，但无法弄清楚我是如何做到的。（Remotipart正确安装，因为它使用了我在应用程序中使用的refile gem。）

使用下面的当前代码，表单将根据日志提交，并显示create.js.erb已呈现，但create.js.erb文件中的代码永远不会运行。

Rendered posts/create.js.erb (387.0ms)

我该怎么办？

形式

<%= form_for @post, remote: true, method: :post, :html => { :multipart => true, class: "post-create-form" } do |f| %>
  <img id="img_prev" style="margin-bottom:10px;" width=300 height=200 src="#" class="img-thumbnail hidden"/>
  <%= f.text_area :body, placeholder: "Share something useful..", class: "form-control post-create-body" %>
  <%= f.button "SHARE", class: "btn btn-primary btn-sm btn-create-post", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
  <span class="btn btn-success btn-sm btn-message-file">Upload Image
    <%= f.file_field :post_image, class: "choose-message-file", id: "avatar-upload" %>
  </span>
  <%= f.hidden_field :post_image_cache %>
<% end %>

create.js.erb

$('ul.errors').hide();
$('.alert-danger').hide();
$('.post-index').prepend('<%= j render @post %>');
$('.post-create-body').val('');
$('.btn-create-post').prop('disabled',true);

_post.html.erb

    <div class="col-md-2">
      <%= link_to user_path(post.user) do %>
        <%= image_tag post.user.avatar.url(:base_thumb), class: 'post-avatar' %>
      <% end %>
    </div>

    <div class="col-md-8">
      <div class="post-info">
        <%= link_to user_path(post.user) do %>
          <span class="post-user-name"><%= post.user.full_name %></span>
        <% end %>
        <span class="post-updated"><%= local_time_ago(post.updated_at) %></span>
      </div>
      <div class="post-body">
        <%= simple_format(find_links(h post.body)) %>
      </div>
      <div class="post-image" data-postlink="<%= post_path(post) %>">
        <% if post.post_image? %>
          <button data-toggle="modal" data-target="#post-image-modal">
            <%= image_tag post.post_image.url(:base_thumb) %>
          </button>
        <% end %>
      </div>
    </div>

更新：问题与更新帖子对象有关。更新表单代码可以在_post.html.erb中找到，这就是<%= j render @post %>无法正常工作的原因。仍然不知道问题是什么。

那么什么有效： 1.创建没有图像的帖子 2.更新没有图像的帖子 3.更新有图像的帖子但不编辑图像不工作： 1.创建有图像的帖子 2.更新包含已编辑图像的帖子

<%= form_for post, method: :patch, remote: true, :html => { :multipart => true } do |f| %>
  <div class="modal fade updatepost" id="updatepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="text-align:left">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="edittaskmodalohhhhh">Edit Task</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger" style="display:none">
            <ul class="errors" style="display:none">
              <%= render 'layouts/error_messages', object: f.object %>
            </ul>
          </div>
          <div class="field form-group">
             <%= f.file_field :post_image, id: "avatar-upload-update" %>
             <%= f.hidden_field :post_image_cache %>
          </div>
          <div class="field form-group">
            <%= f.text_area :body, class: "form-control edit-post-body" %>
          </div>   
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="updatepostclose">Close</button>
            <%= f.button "Update post", class: 'btn btn-primary edit-post-submit', data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
        </div>
      </div>
    </div>
  </div>
<% end %>

update.js.erb

$("ul.errors").html("");
<% if @post.errors.any? %>
   $('.alert-danger').show();
   $('ul.errors').show();
   <% @post.errors.full_messages.each do |message| %>
     $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
   <% end %>
<% else %>
  $('ul.errors').hide();
  $('.alert-danger').hide();
  $('#updatepost_<%= @post.id %>').modal('hide');
  $post = $('<%= j render @post %>');
  editPostHideDanger($post);
  $('#post_<%= @post.id %>').remove();
  $(".new-post-insert").prepend($post);
  $("html, body").animate({ scrollTop: 0 }, "slow");
<% end %>

Answer 1

使用引导模态存在一些问题（仍然不知道是什么）。我改变了模态的结构，现在它工作正常。

使用remotipart上传carrierwave AJAX

1 个答案: