Trigger the show of a modal with Phoenix.LiveView.JS

I walk through the docs of Phoenix.LiveView.JS in LiveView 0.17.1 Phoenix.LiveView.JS — Phoenix LiveView v0.17.1

I see how I can hide a modal with phx-remove={hide_modal()}.

But is it possible to trigger the show and hide of a modal with Phoenix.LiveView.JS from the server or would that be the wrong tool for that? Actually I’d like to trigger the show of the modal on the server and use the client to hide it.

LiveView.JS is intended to avoid the round-trip to the server and execute commands one the client side. So you could use it to hide elements on the client, but triggering stuff from the server-side is still done using the assigns on the socket.

Maybe take a look at ElixirConf 2021 - Chris McCord - The Future of Full-stack
At about 33min the JS Commands are explained and demoed.

4 Likes