ACodei Codando said over 1 year 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 over 1 year ago on Hotwire Modals :
How was bootstrap installed? I created the new app with

rails new example --javascript esbuild --css bootstrap

ACodei Codando said over 1 year ago on Hotwire Modals :
  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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Wolfgang Barth PRO said over 1 year 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 over 1 year ago on Hotwire Modals :
  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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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 said over 1 year ago on Hotwire Modals :
  I did 
bin/importmap pin bootstrap

and works without cdn

Leonardo Barroeta PRO said over 1 year ago on Hotwire Modals :
Hey  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 over 1 year 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 over 1 year 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 over 1 year ago on Hotwire Modals :
  Yes, absolutely. I actually have a mention to this in the top of the show notes.

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

brad said over 1 year 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 over 1 year ago on Hotwire Modals :
How to use skill in TailwindCSS?

Markus Sadler PRO said over 1 year 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 %>

   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 about 1 year 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 said about 1 year ago on Hotwire Modals :
HI  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 said about 1 year ago on Hotwire Modals :
 HI, there is a repeat animation of the modal. Is there any solution?

David Kimura PRO said about 1 year ago on Hotwire Modals :
  , 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 said about 1 year ago on Hotwire Modals :
 , 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 said about 1 year ago on Hotwire Modals :
  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 about 1 year 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 said about 1 year ago on Hotwire Modals :
 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? 

philkman PRO said 10 months ago on Hotwire Modals :
I had the same issues of triggering downloading the result with Firefox on MacOS, when doing a
link_to(some_path(format: :turbo_stream))

However, there is a very simple solution to that, which triggers turbo_stream correctly. This way, you even can get rid of the 'turbo'-controller:
link_to(some_path, method: :get)



philkman PRO said 10 months ago on Hotwire Modals :
Correction to my last answer: You need to add '@rails/ujs' first

manuel.lombardi PRO said 4 months ago on Hotwire Modals :
What I don't really like of this approach is that it seems that instead of having one reusable modal for replacing the content, you have to create a modal for each view you want to render.

Did anyone managed to make a reusable version with turbo?

David Kimura PRO said 4 months ago on Hotwire Modals :
You could create a PORO, view component, helper or partial which has a generic modal. From there, you could pass in the locals required for the title, content, etc. Personally, I don't mind creating a new modal for this kind of stuff, but I do see the benefit if modals are a primary way that users interface with the application. 

leevigraham said 3 months ago on Hotwire Modals :
this.element.setAttribute("data-action", "click->turbo#click")

This will overwrite any other actions. 

Maybe the following would be safer? 

connect() {
    const oldAction = this.element.getAttribute('data-action') || "";
    const newAction = oldAction + " click->turbo#click";
    this.element.setAttribute('data-action', newAction.trim())
}

David Kimura PRO said 3 months ago on Hotwire Modals :
Yes, if there are already existing actions, this would be a safer bet as to not unknowingly break existing functionality.

François Gagneau said 2 months ago on Hotwire Modals :
Hi! I have a problem handling errors. In my case I need to be able to create a company from the menu of my application, so from anywhere in the application.
I managed to display the modal with your method, but I don't know what should I do when there are errors, I tried this :

if @company.save
  redirect_to company_root_path(company_slug: @company.slug), notice: t('.success')
else
  turbo_stream.update('modal', partial: 'form_modal', locals: {company: @company})
end

but nothing change and I can't submit again, and when I try render 'new', I do have the form with errors in my modal, but it also redirect to the new page, I just need to update the modal without being redirect. I'm a noob with turbo!

Did anyone have a solution? Thanks in advance.

François Gagneau said 2 months ago on Hotwire Modals :
Ok sorry for this, it's a legacy project and i just found that someone have set data-turbo to false... It works like a charm now

Login to Comment