在按钮使用 Ajax 更改状态时将“更改...”添加到按钮

问题描述

我有一个按钮，它使用 Javascript 将 完整的布尔值从真切换为假，反之亦然。

我希望将内部文本更改为 更改...，因为它从一种状态变为另一种状态。 我已将 sleep 添加到控制器中的方法中，并尝试添加 data: { disable_with: "changing..."} 但这会在完成时中断文本更改。

有没有人有解决方案？

meetings_controller.rb

def completed
  sleep 1
  @meeting.toggle!(:complete)
end

index.rb

中的链接

<div id="meeting-<%= meeting.id %>">
  <%= link_to "#{ meeting.complete ? 'Already completed' : 'Mark as complete'  }",completed_meeting_path(meeting),method: :patch,remote: :true,class: "btn btn-#{ meeting.complete ? 'success' : 'warning' }"  %>
</div>

completed.js.erb

<% if @meeting.complete == true %>
  $("#meeting-<%= @meeting.id %> a").html('Already completed').removeClass('btn-warning').addClass('btn-success');
<% else %>
  $("#meeting-<%= @meeting.id %> a").html('Mark as complete').removeClass('btn-success').addClass('btn-warning');
<% end %>

解决方法

您可以向按钮添加 click event：

// some_file.js
$("#meeting_container").on("click","a",function(e) {
  $(e.target).html("changing...").prop("disabled",true);
});
// Example code,may need to tweak a bit