DEV Community

Rails Designer
Rails Designer

Posted on • Originally published at railsdesigner.com

3

Custom Confirm Dialog For Turbo and Rails

This article was originally published on Rails Designer.


With Turbo it is pretty straightforward to customize the browser's confirmation dialog. Rails Designer has just released a new set of utilities that includes a custom confirmation dialog packed with three great-looking themes.

Light Theme

This is the default “theme”. Works well for most apps.

Image description

Light Glass Theme

Similar to the light theme, but with a glass-like effect. Subtle, but looks cool with really visual apps.

Image description

Dark Theme

I like to use dark elements like these in an otherwise light application.

Image description

Besides the message, you can also set the “confirm” and the “cancel” button labels. This is how you would use it in your Rails app:

button_to "Delete…",
filters_path(filter),
  method: :delete,
  data: {
    turbo_method: "delete",
    turbo_confirm: "Really delete this filter?",
    turbo_confirm_confirm_label: "Yes, delete",
    turbo_confirm_cancel_label: "No, go back",
  }
Enter fullscreen mode Exit fullscreen mode

(Note: Rails Designer's version also accepts the theme attribute).


Adding your own custom dialog is just a few lines of code. First customize Turbo Drive's confirmation handling, using its Turbo.setConfirmMethod with a modal that resolves actions based on user clicks on "commit" or "cancel" buttons. The once: true means they each are configured for a single use.

// app/javascript/application.js
Turbo.setConfirmMethod((message, element) => {
  const dialog = insertConfirmModal(message, element);

  return new Promise((resolve) => {
    dialog.querySelector("[data-behavior='cancel']").addEventListener("click", () => {
      dialog.remove();

      resolve(false);
    }, { once: true })
    dialog.querySelector("[data-behavior='commit']").addEventListener("click", () => {
      dialog.remove();

      resolve(true);
    }, { once: true })
  })
})
Enter fullscreen mode Exit fullscreen mode

Then the insertConfirmModal() function could look a bit like this.

// app/javascript/application.js
function insertConfirmModal(message, element) {
content = `
  <div id="confirm-modal">
    ${message}
    <button data-behavior="commit">Confirm</button>
    <button data-behavior="cancel">Cancel</button>
  </div>
`

  document.body.insertAdjacentHTML('beforeend', content);
  document.activeElement.blur();

  return document.getElementById("confirm-modal");
}
Enter fullscreen mode Exit fullscreen mode

It inserts a confirmation modal (#confirm-modal) into the webpage and removes focus from the currently active element, returning this newly created modal element.

Of course it needs a bit of styling, but as you can see from above examples you can style it however you want!

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (1)

Collapse
 
railsdesigner profile image
Rails Designer

The other utilities released in Rails Designer are:

  • Toggle Class Controller
  • String Helpers
  • Cookies helpers

Read all about in the docs

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay