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

Question

I'm using Rails 4.2 and I'm having issues simply trying to update text on a button after a form post via ajax (remote => true). I'm doing other dom changes that work just fine. I realized that the issue is being caused because I'm using the data-disable-with attribute on my button_tag code.

form_tag and button_tag code

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 - the js.erb refreshes the partial for shopping cart totals and updates the item button color and background without any issues, but no matter what I try I cant get the button text to update.

<!-- 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 %>

I thought perhaps I needed to explicitly check that the ajax success event was triggered, but this does not work either.

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

I also tried .text but that wont work.

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

Is there any way to update button text using the data-disable-with attribute for button_tag or is there some other work around that can be done? I still would prefer disabling the button on the submit showing a loader then updating the text.

Answer 1

I resolved my problem by setting button attribute to enabled after ajax success. It seems currently in rails after the success event the button element still has the disabled property when you use data-disable-with.

In my js.erb before updating the button text I make sure the button is enabled

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

This resolved the problem. full change.

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