Rails 4 -通过ajax的按钮文本不能用data-disable-with属性更新

Question

我使用的是Rails 4.2，我只是试图通过ajax (remote => true)在表单发布后更新按钮上的文本。我正在做其他dom更改，这些更改工作得很好。我意识到这个问题是因为我在我的button_tag代码上使用了data-disable-with属性而引起的。

form_tag和button_tag代码

form_tag({:controller => "/carts", :action => "add_to_cart"}, :name => "add_to_cart", :method => "post", :id => "add_to_cart", :class => "form-inline cart-form", :remote => true)
  <div class="form-group>
    <input type="text" name="line_item[quantity]" id="line_item_quantity" size="2" class="form-control input-sm" value="">
    button_tag( ((item_in_cart) ? "Update" : "Add"), :class => ((item_in_cart) ? "btn green addtocart" : "btn blue addtocart"), :name => "button_#{item.id}", :id => "button_#{item.id}", 'data-disable-with' => "<i class='fa fa-refresh fa-spin'></i> Submitting..")
  </div>
</form>

js.erb - js。erb刷新购物车总数的部分，并更新项目按钮的颜色和背景，没有任何问题，但无论我怎么尝试，我都无法更新按钮文本。

<!-- refesh minicart -->
$("#header_cart_bar").empty().html("<%= j render(:partial => 'carts/cart_mini_block') %>");
<% if @chkqty.to_i == 0 %>
    $("div#wr<%= @item.id %>").removeClass("incart-bg");
    $("button#button_<%= @item.id %>").removeClass("green").addClass("blue").html("Add");
<% else %>
    $("div#wr<%= @item.id %>").addClass("incart-bg");
    $("button#button_<%= @item.id %>").removeClass("blue").addClass("green").html("Update");
<% end %>

我想也许我需要显式地检查ajax成功事件是否被触发，但这也不起作用。

$("form#add_to_cart").on('ajax:success', function(xhr, status, error) {
  <% if @chkqty.to_i == 0 %>
    $("div#wr<%= @item.id %>").removeClass("incart-bg");
    $("button#button_<%= @item.id %>").removeClass("green").addClass("blue").html("Add");
  <% else %>
    $("div#wr<%= @item.id %>").addClass("incart-bg");
    $("button#button_<%= @item.id %>").removeClass("blue").addClass("green").html("Update");
  <% end %>
});

我也试过。text，但这不起作用。

$("button#button_<%= @item.id %>").removeClass("blue").addClass("green").text("Update"); 

是否有任何方法使用data-disable-with属性来更新按钮文本button_tag或者是否有其他可以做的工作?我还是更喜欢禁用按钮上的提交显示加载器，然后更新文本

Answer 1

我通过在ajax成功后将按钮属性设置为启用来解决我的问题。它似乎目前在rails成功事件后，按钮元素仍然具有禁用属性，当你使用data-disable-with。

在我的js。在更新按钮文本之前，我确保按钮是启用的

$("button#button_<%= @item.id %>").prop("disabled",false);

这解决了问题。完全改变。

 $("form#add_to_cart").on('ajax:success', function(xhr, status, error) {
      <% if @chkqty.to_i == 0 %>
        $("button#button_<%= @item.id %>").prop("disabled",false);
        $("div#wr<%= @item.id %>").removeClass("incart-bg");
        $("button#button_<%= @item.id %>").removeClass("green").addClass("blue").html("Add");
      <% else %>
        $("button#button_<%= @item.id %>").prop("disabled",false);
        $("div#wr<%= @item.id %>").addClass("incart-bg");
        $("button#button_<%= @item.id %>").removeClass("blue").addClass("green").html("Update");
      <% end %>
    });