Using form_for with LiveView and Bootstrap Modal component

Sorry for being off-topic, but I’ve encountered similar problems with bootstrap+liveview (some with the modal as well) and decided to use a no-js css framework, turned out to be much simpler in the end.

Here’s an example of a modal component: chirp/lib/chirp_web/live/modal_component.ex at master · dersnek/chirp · GitHub

A modal component can also be generated with mix phx.gen.live.

I had problems with this too and found a tutorial:

I haven’t tried it yet, so YMMV!

Yes, we switched to using Bulma for this very reasons.

I had problems with this too and found a tutorial:

I saw that video but frankly didn’t find it all that helpful. The modal in the video is actually a LiveView modal that comes with out of the box with phx.gen.live, but seems to just have a few bootstrap classes thrown on it to have the appearance of a Bootstrap modal.

There’s nothing wrong with that at all, but it isn’t a Bootstrap modal in the sense that it uses the JS from bootstrap to toggle a modal, include a backdrop and other dynamic features.

Hi @michaelfich!

There’s a recent article by Dashbit that covers this scenario:

If you are using Bootstrap 4 with Jquery you could do something like this:

modal_component.ex

def render(assigns) do
    ~L"""
    <div class="modal fade show" tabindex="-1" role="dialog" 
        phx-target="<%= @myself %>"
        phx-capture-click="close"
        phx-page-loading>
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <%= live_patch to: @return_to, class: "close", "data-dismiss": "modal" do %>
          <span aria-hidden="true">&times;</span>
        <% end %>
      </div>
      <div class="modal-body">
      <%= live_component @socket, @component, @opts %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" phx-capture-click="close"  phx-target="<%= @myself %>">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    </div>
    </div>
    """
  end

app.js

import $ from "jquery"

window.addEventListener("phx:page-loading-stop", info => {
  $('.modal.fade.show').modal('show')
  NProgress.done()
})

<%= if @live_action in [:new, :edit] do %>
<%= live_modal @socket, MyAppWeb.ResourceLive.FormComponent,
    return_to: Routes.resource_path(@socket, :index, @resource) %>
<% end %>

I’ve been experimenting with LV only for the past week, so I don’t know if there’s a better way of doing this. What other alternatives have you found since the last time you posted?

Update: If you are experiencing problems submitting forms inside the modal where the backdrop still is visible, you might try adding this code after the page stops loading:

$('.modal.fade.show form').on('submit', () =>  $('.modal.fade.show').modal('hide'))

PS.: In my tests, form submits and data-dismiss="modal" were blocking each other.
I could either dismiss the modal or submit the form, not both.

Its a bummer to have to pull in JQuery just to get Bootstrap components working, and having to sprinkle JS all around to get things working feels like an anti-pattern to me. I think one of the articles above suggests using BootstrapNative, and I want to highlight that here. BSN has the benefit of having its own init callback that you can fire after “phx:page-loading-stop”. Going about it this way solved most (not all though) of these kinds of issues for me:

window.addEventListener("phx:page-loading-stop", info => {
  BSN.initCallback(document.body)
  NProgress.done()
})

I’ve had this same issue for when the component itself manages it’s state of visibility and the form handling (validation, etc) is managed by the parent live view.

Did you resolve the issue?

Just looking for the same thing for Bootstrap 5.

If I have to switch frameworks then I’d probably switch to Bulma as suggested above but I just don’t want to deal with all the possible issues I’ll have with Webpack and etc. while trying to switch to Bulma. Moreover I’ve never used Bulma so unless there’s a way with Bootstrap 5 then I’ll consider switching.