Episodes
ACodei Codando PRO said 3 months ago on Hotwire Modals :
Having problems with auto import import modal controller.

I'm just using the rails 7.0.1 with normal install and without package.json

The source project has a lot of errors like missing application.css and gem 'sass-rails', import of bootstrap
Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../".

David Kimura PRO said 3 months ago on Hotwire Modals :
How was bootstrap installed? I created the new app with

rails new example --javascript esbuild --css bootstrap

ACodei Codando PRO said 3 months ago on Hotwire Modals :
  David Kimura do you have the same problem with me? About what you did, normally I just add the CSS in application.html.erb. It's more simple to me.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Wolfgang Barth PRO said 3 months ago on Hotwire Modals :
Yeah, I love this idea: render the complete modal via turbo_stream and then use connect() to auto-open the modal. I will give it a try.

David Kimura PRO said 3 months ago on Hotwire Modals :
  ACodei Codando I tested out this method with Importmaps while using the bootstrap CDN resources and it seems to work the same.

In the application layout, I included both the CDN endpoints for the CSS and JS. When including the JS, it does set window.bootstrap for us.

  <head>
    <title>Drifting Ruby</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

ACodei Codando PRO said 3 months ago on Hotwire Modals :
  David Kimura I did 
bin/importmap pin bootstrap

and works without cdn

Leonardo Barroeta PRO said 3 months ago on Hotwire Modals :
Hey   David Kimura great video helped me a lot, just a short typo in the turbo in turbo_controller.js at the first .then you write t.text instead of r.text. Greetings!

David Kimura PRO said 3 months ago on Hotwire Modals :
Yea, I noticed it in post, but it was a bit late to go back and fix the video. Easter Eggs! However, I did get it correct in the show notes. 😊

Nathan Verni said 3 months ago on Hotwire Modals :
Couldn't you have replaced the `TurboController` and stream response functionality by just doing this?

<%= link_to "Edit", edit_project_path(project), data: { turbo_frame: "remote_modal" } %>

You would still need to use stimulus to initialize the bootstrap modal

David Kimura PRO said 3 months ago on Hotwire Modals :
  Nathan Verni  Yes, absolutely. I actually have a mention to this in the top of the show notes.

Nathan Verni said 3 months ago on Hotwire Modals :
Ahh, yes. Nice! Love finding new ways to use all the hotwire features. Thanks for the great video

brad said 3 months ago on Hotwire Modals :
One issue with Turbo and submitting a form is with redirects. Sometimes redirecting doesn't update the page even if the form has been submitted successfully. I keep on getting this error in the console: 
Response has no matching <turbo-frame id="remote_modal"> element

Currently there is this open issue

Anyone been successful with a workaround?

xuling1979 said 3 months ago on Hotwire Modals :
How to use skill in TailwindCSS?

Markus Mühlberger PRO said 3 months ago on Hotwire Modals :
One enhancement for this approach is to wrap the form in a turbo_frame_tag as well and use a separate template to just update the form. This avoids any repeat animation that might look weird.

_form.html.erb
<%= turbo_frame_tag :project_form do %>
  <%= form_with model: project do |f| %>
    ...
  <% end %>
<% end %>

create.turbo_stream.erb
<%= turbo_stream.replace :project_form do %>
  <%= render partial: 'form', locals: { project: @project } %>
<% end %>

  xuling1979   We are using TailwindCSS and it works by using the tailwindcss-stimulus-components. The only thing you need to make sure is that `data-modal-open-value` is set on the controller element.

hpobric PRO said 2 months ago on Hotwire Modals :
Any idea how I can make a script inside the turbo frame loaded in the modal initialize when the frame is loaded? It works fine when I have the frame loaded inline with other divs on the page (UI) but fails to initialize when the frame is loaded in the modal.

muddin13 PRO said 18 days ago on Hotwire Modals :
HI  Markus Mühlberger thanks for the solution to the repeat animation of modals. I tried your solutions but couldn't make it work.  Is it possible to give your completed code repo link so that I can compare whether I am missing something? Thanks.

muddin13 PRO said 17 days ago on Hotwire Modals :
 HI David Kimura , there is a repeat animation of the modal. Is there any solution?

David Kimura PRO said 17 days ago on Hotwire Modals :
  muddin13 , you can probably mitigate this from a visual perspective by removing the "fade" class

<div class="modal fade" data-controller="modal">

to 

<div class="modal" data-controller="modal">

muddin13 PRO said 16 days ago on Hotwire Modals :
  David Kimura , thanks for your reply. I tried removing the "fade" class, but it's still the same. Attached is a file of the recorded screen so that you can see the actual issue.

muddin13 PRO said 16 days ago on Hotwire Modals :
  David Kimura above attachment is a video file. It happens once updates the record by popping up the modal and back to the projects index page again. It seems the modal does not close properly after updating the record. I tried with the code from your code repo to check whether the issue is in my code, but it's the same.

David Kimura PRO said 16 days ago on Hotwire Modals :
That's strange, I removed the fade class, and while it did remove some of the animation functionality, it did properly display the persisted form while submitting and getting a server response.

muddin13 PRO said 16 days ago on Hotwire Modals :
  David Kimura to be sure that I am not missing something, I tried again from your this code repo https://github.com/driftingruby/335-hotwire-modals.git. Removed fade class as you mentioned. Its still the same. If you have different code repo with that fade class removed as working at your side, could you please send me the link so that I can try it on my side? 

Login to Comment