Rubyonrails Rails 7.0.4 和 link_to 的数据确认不起作用

发布于01月08日

我最后的机会是罗尔最后一个活着的开发人员

在互联网最黑暗的角落里，没有什么是有用的:

<%= link_to 'some-link', '#', data: { confirm:'Are You Sure?') %>;

它会产生这样一个结果:

<a data-confirm="Are you sure?" href="#">some link</a>

但没有确认对话框.

我try 了所有的方法-turbo_confirm，try 添加带有刺激类的控制器...但还是一无所获.

现在，我移除了涡轮轨道、刺激系统等--但仍然一无所获.

推荐答案

data-turbo-confirm将显示带有给定值的确认对话框.能用于form个元素或links with 102个元素.

100

有效的例子

<%= link_to "GET turbo link", "/",
  data: {
    turbo_method: :get,
    turbo_confirm: "Sure?"
  }
%>

<%= link_to "POST turbo link", "/",
  data: {
    turbo_method: :post,
    turbo_confirm: "Sure?"
  }
%>

<%= button_to "Button", "/",
  data: { turbo_confirm: "Sure?" }
%>

<%= form_with url: "/",
  data: { turbo_confirm: "Sure?" } do |f| %>

  <%= f.submit "Submit" %>
<% end %>

不起作用

<%= link_to "GET link", "/",
  data: { turbo_confirm: "Sure?" }
%>

通过添加turbo_method: :get进行修复.

真的不管用

<%= link_to "UJS link", "/",
  data: { confirm: "Sure?" }
%>

但很容易修复:

// app/javascript/application.js

document.addEventListener("click", event => {
  const element = event.target.closest("[data-confirm]")

  if (element && !confirm(element.dataset.confirm)) {
    event.preventDefault()
  }
})

数据-禁用-带

这个稍微复杂一些，但它们都是相同的模式，侦听事件，判断数据属性，如果不是，就做些什么.

// app/javascript/application.js

// on form submit
// set `value` if `input`
// set `innerHTML` if `button`
document.addEventListener("turbo:submit-start", event => {
  const element = event.detail.formSubmission.submitter
  if (element.hasAttribute("数据-禁用-带")) {
    // element.disabled = true // this is done by turbo by default
    if (element instanceof HTMLInputElement) {
      element.value = element.dataset.disableWith
    } else {
      element.innerHTML = element.dataset.disableWith
    }
  }
})

<%= form_with url: "/" do |f| %>
  # <button>
  <%= f.button "Submit", data: { disable_with: "..." } %>
  # <input>
  <%= f.submit "Submit", data: { disable_with: "..." } %>
<% end %>