form_for：remote =＆gt;真的没有用

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创建和使用的，但我不确定它与我的问题有什么联系：（

UPD：

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

//= 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