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!
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
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.
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.
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.
☒, 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.☒
☒ 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.
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.
☒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?
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?
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.
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!
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
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>and works without cdn
<%= link_to "Edit", edit_project_path(project), data: { turbo_frame: "remote_modal" } %>You would still need to use stimulus to initialize the bootstrap modal
Currently there is this open issue
Anyone been successful with a workaround?
_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 %>to
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:
Did anyone managed to make a reusable version with turbo?
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()) }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}) endbut 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.