Rails 4 - 通过 ajax 的按钮文本无法使用 data-disable-with 属性更新

Question

我正在使用 Rails 4.2，我只是在尝试通过 ajax（远程 => 真）更新表单 post 之后的按钮上的文本时遇到问题。我正在做其他 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.erb 更新按钮文本之前，我确保按钮已启用

$("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 %>
    });

Rails 4 - 通过 ajax 的按钮文本无法使用 data-disable-with 属性更新

Rails 4 - button text via ajax cannot be updated with data-disable-with attribute

jquery

ajax

ruby-on-rails-4.2

form-helpers