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

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.

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() }.

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.