Rails 5.1 - 通过ajax提交表单,返回javascript没有执行

时间:2017-07-07 13:25:25

标签: jquery ruby-on-rails ajax

我有一个用于创建用户对象的Rails 5.1表单,在呈现时看起来像这样:

<form class="upload-form" action="/users" accept-charset="UTF-8" data-remote="true" method="post">

<input name="utf8" type="hidden" value="✓">

...all the fields...

  <div class="actions">
    <input type="submit" name="commit" value="Submit" data-disable-with="Submit">
  </div>
</form>

提交正常,控制器操作触发。这是:

  def create
    @user = User.new(user_params)    
    if @user.save
      respond_to do |format|      
        format.js 
      end
    end
  end

但是返回的create.js.erb不会在浏览器中执行:

$('#upload-form').on('ajax:success', function(event, data, status, xhr) {
  console.log(data);
  var field = $('#upload-form').find('input[name=fileinput]');
  var file = field[0].files[0];
  console.log(file);
});

我很困惑为什么这个js没有被执行(我可以看到它在响应中返回)。

2 个答案:

答案 0 :(得分:1)

您已将upload-form定义为class,但您在 JS 中将其称为ID

更改

$('#upload-form').on('ajax:success', function(event, data, status, xhr) {
  console.log(data);
  var field = $('#upload-form').find('input[name=fileinput]');
  var file = field[0].files[0];
  console.log(file);
});

到这个

$('.upload-form').on('ajax:success', function(event, data, status, xhr) {
  console.log(data);
  var field = $('.upload-form').find('input[name=fileinput]');
  var file = field[0].files[0];
  console.log(file);
});

答案 1 :(得分:1)

对于其他任何人来说,在这个问题上绊倒,但上述情况并没有帮助:

我正在使用CoffeeScript并遇到了同样的问题。我有一个名为index.coffee的文件,它将部分模板呈现为一个函数来替换客户端的div。当我以正常方式呼叫路线时工作量很大,但是当我通过“button_to”渲染路线时无效。

Rails正确渲染JS,将其发送到浏览器,我可以测试JS并且运行正常。但是在button_to点击时不会调用它。

我所做的就是将文件重命名为“index.js.coffee”并开始工作。是的,Rails古怪!