5

My last chance is some last living developer in RoR

Nothing in the darkest corners of the internet works for:

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

it generate this:

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

but there is no confirm dialog box.

I try everything - turbo_confirm, try to add controller with class for stimulus ... and still nothing.

Right now I remove turbo-rails, stimulus etc. - but still nothing.

Wordica
  • 2,427
  • 3
  • 31
  • 51

2 Answers2

7

data-turbo-confirm presents a confirm dialog with the given value. Can be used on form elements or links with data-turbo-method.

https://turbo.hotwired.dev/reference/attributes

Examples that work

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

Doesn't work

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

Fix by adding turbo_method: :get.

Really doesn't work

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

But easy to fix:

// app/javascript/application.js

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

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

data-disable-with

Update Use data-turbo-submits-with to handle this.

This one is a bit more involved, but it's all the same pattern, listen for event, check for data attribute, if else, do something.

// 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("data-disable-with")) {
    // 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 %>
Alex
  • 16,409
  • 6
  • 40
  • 56
1

I don't like magic links with confirmation dialogues or some special HTTP verbs

I think links must be just links

And if you want some special features — use forms instead

<%= button_to 'Some text', some_path, method: :get, form: { data: { turbo_confirm: 'Are you sure?' } } %>

(need add data-attribute to form containing this button)

mechnicov
  • 12,025
  • 4
  • 33
  • 56