Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I render a (Stimulus) modal without user interaction?

Jeff Helman asked in Javascript

When a data value in my view meets certain criteria (e.g.: "< 0"), I want to render a modal (which is configured using Stimulus).

I know this is a noobish question, but I'm not finding obvious answers in my Googling/SO spelunking.

Reply

The easiest solution is to add a data map object to the controller element, eg. <div data-controller="modal" data-modal-preload="true"></div>. Based on your criteria you can either add "true" of false (or null)" there, eg data-modal-preload="<%= x < 0 ? true : false %>".

Then within your modal controller's connect(), check for this value to be set and true, if so fire the function that opens/shows your modal, eg. if (this.data.get("preload") && this.data.get("preload") == "true") { this.open() }.

Reply

Many thanks, Eelco!

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 76,990+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.