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

【问题标题】：Add "changing..." to a button as it changes state using Ajax在按钮使用 Ajax 更改状态时将“更改...”添加到按钮
【发布时间】：2021-03-29 15:39:20
【问题描述】：

我有一个按钮，它使用 Javascript 将 完全布尔 从 true 切换为 false，反之亦然。

我希望将内部文本更改为 正在改变...，因为它从一种状态变为另一种状态。我在控制器中的方法中添加了睡眠，并尝试添加 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 %>

【问题讨论】：

标签： javascript ruby-on-rails ajax erb ruby-on-rails-6

【解决方案1】：

您可以在按钮上添加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

【讨论】：