ruby-on-rails-3 - Rails 3：在提交按钮中：disable_with 不起作用

Question

在以下代码中：disable_with 在 rails 3 中不起作用。但它在 rails 2.2 中完美运行

这段代码有什么问题？

<%= submit_tag "Save", :class => "buttons",
                       :disable_with => "Processing",
                       :id => 'save_btn' %>

Answer 1

从 3.2.5 版开始，您不应该使用 :disable_with。

<%= submit_tag "Save", 'data-disable-with' => "Processing", :class => "buttons", :id => 'save_btn' %>

或者

<%= submit_tag "Save", data: { disable_with: "Processing" }, :class => "buttons", :id => 'save_btn' %>

Answer 2

在原始 html 中检查以下内容：

• 提交按钮具有 data-disable-with 属性
• 您的页面包含 jQuery js。对我来说，我有：
  • https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
• 您的页面包含 jquery_ujs js。对我来说，我有：
  • /javascripts/jquery_ujs.js

您可以在https://github.com/rails/jquery-ujs上阅读更多内容。不同导轨版本的不同安装。

Answer 3

我在 Safari 8.0.6 和最新的 rails-ujs 上遇到了类似的问题。这是我解决此问题的方法：

%button{ class: 'btn btn-action js-submit', data: { method: :put, 'href' => '...', disable_with: "<i class='icon icon-spinner icon-spin'></i>".html_safe }} Submit

$('.js-select-plan').click(function(event) {
  event.preventDefault();
  var $target     = $(this),
      href        = $target.data('href'),
      method      = $target.data('method'),
      formTarget  = $target.attr('target'),
      csrfToken   = $('meta[name=csrf-token]').attr('content'),
      csrfParam   = $('meta[name=csrf-param]').attr('content'),
      form        = $('<form method="post" action="' + href + '"></form>'),
      metaData    = '<input name="_method" value="' + method + '" type="hidden" />';

  if (csrfParam !== undefined && csrfToken !== undefined) {
    metaData += '<input name="' + csrfParam + '" value="' + csrfToken + '" type="hidden" />';
  }

  if (formTarget) {
    form.attr('target', formTarget);
  }

  // disable button/link element
  var contentMethod = $target.is('button') ? 'html' : 'val';
  var replacement   = $target.data('disable-with');
  $target.data('ujs:enable-with', $target[contentMethod]());
  if (replacement !== undefined) {
    $target[contentMethod](replacement);
  }
  $target.prop('disabled', true);

  form.hide().append(metaData).appendTo('body');
  setTimeout(function(){
    form.submit();
  }, 50);
});

这在所有浏览器中都像一个魅力。为了获得更好的灵活性，您可能希望将其包装在帮助程序中。