form_for :remote => true 不起作用

Question

我有一个表格：

=form_for @user, :html => {:class => "form-horizontal"}, remote: true, :authenticity_token => true do |f|
  %h2.underline= t('edit-profile-picture')
  %p=t('upload_message')
  .flexbox.flex-center
    .btn.btn-default{:onclick => 'upload()'}= t('choose-file')
    = f.file_field :avatar, :style => 'visibility: hidden; position: absolute'

当用户选择文件时由脚本提交。

$("input:file").change(function (){
    $('#edit_user_2').submit();
}); 

一切都很顺利，除了一件事——控制台说：

Processing by UsersController#update as HTML

显然，我在控制器中收到了符合 format.html 的响应：

respond_to do |format|
      format.js
      format.html {redirect_to user_path}
end

最奇怪的是，它与我在另一个控制器中的另一个 form_for（非常简单）完美配合。

=form_for @suggestion, remote: true do |f|
      .col-sm-12
        .form-group
          %label.control-label{:for => 'name'}= t('your-suggestion')
          = f.text_area :content, :placeholder => t("suggestion-example"), :class => "form-control"
      .row.container-margin
        .col-sm-2.col-sm-offset-10
          = f.submit t("send"), :class => "btn btn-default"

正如预期的那样，控制台说：

Processing by SuggestionsController#create as JS

我已经尝试过像这样强制:format => :js：

=form_for @user, :html => {:class => "form-horizontal", 'data-type' => 'js'}, remote: true, :authenticity_token => true, :format => :js do |f|

它给出了一个奇怪的结果：

Processing by UsersController#update as JS
...
Rendered users/update.js.erb (0.0ms)

但它呈现为原始文件！

所以，我的remote: true 似乎由于某种原因不起作用。任何想法为什么？我想到了一件事：用户模型是由 Devise gem 创建和使用的，但我不确定它与我的问题有什么关系:(

更新：

是的，我的 application.js 清单中有 jquery_ujs。这里是：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui
//= require_tree .

UPD2：

我试图摆脱我的 JavaScript upload() 函数并使用经典的 input，但结果相同。

Answer 1

如果您准备放弃您的标准 HTML 表单功能（IE 只制作表单 ajax 和文件上传），您将能够使用jquery-file-upload。

我们已在多个实现中使用它来提供 ajax 上传功能：

这可以使用jquery-file-upload 插件，您可以在此处查看代码。

--

简而言之，如果你使用插件，你必须将上传表单绑定到.fileupload()函数：

$('#avatar').fileupload({

    url: '/profile/' + $(this).attr('data_id'),
    dataType: 'json',
    type: 'post',

    add: function (e, data) {
        //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>');
        //$('#avatar_loading').fadeIn('100');
        $(this).avatar_loading('avatar_loading');
        data.submit();
    },
    success: function (data, status) {;
        $("#avatar_img").fadeOut('fast', function() {
            $(this).attr("src", data.avatar_url).fadeIn('fast', function(){
                $(this).avatar_loading('avatar_loading');
            });
        });
    }

});

如果您的应用需要特定代码，我很乐意编写更新。

Answer 2

您无法使用 AJAX 上传文件。这可能是提交是 HTML 而不是 JS 的原因。

https://stackoverflow.com/a/13626557/5381547