的Rails 3：在提交按钮：disable_with不工作

Question

在这下面的代码：disable_with没有在轨道3工作，但它是在轨工作完美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如下：

• 提交按钮有数据 - 禁用 - 与属性
• 你的页面包括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); 
}); 

这就像在所有浏览器魅力。为了获得更好的灵活性，您可能需要将其封装在助手中。