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!
Hey. super helpful video!! Appreciate this!! Any idea why when I render my form by directly accessing if via projects/new (e.g. not in the modal), if I click the create button, the format comes through as turbo_steam instead of HTML even though I didn't load it through the turbo controller. I just want the normal CRUD interface along with the modal capability, but when I submit my form via project#new and then project#create, it uses the turb_stream path and tries to do the replace from the turbo stream create action template rather than choosing the
format.html { redirect_to projects_path, notice: "Project was successfully created." }
in the create action. If I remove the:
format.turbo_stream
It works fine, though it is still coming through as turbo_stream fomat.
Ok. Great! Thanks David. That worked! I just pass a parameter to the form partial used in both the _form_modal as well as my project/new and project/update views specifying whether it should use turbo. I'm assuming that's how you're suggesting I use that.
Unrelated (sort of): Do you know how I can just dismiss the modal instead of allowing it to redirect? In my case, I have loaded a form for one entity that has a link to open the form (new) for another entity that opens in the modal. When I finish creating that secondary entity, I want to update a dropdown in the first form with the new record added to it and selected. I've got the adding and selecting working. I am just not sure how to dismiss the modal after the secondary entity has been successfully created.
Thanks again for your help. This was really the only video I've watched that made sense to me. I just walked through all the steps and everything became much clearer. Nice job!
One 'bug' which I noticed in my implementation is that if a user clicks outside the modal to dismiss it, navigates to a different page, then returns to the page with the modal, the page displays the model immediately. I believe this is because displaying the remote modal add the modal's content within the Turbo Frame tag, which Turbo caches and reloads when the user navigates away and back to the page. I downloaded your source and believe I was able to reproduce.
I wrote the following which will reset the Turbo Frame tag whenever the modal is hidden:
I am using tailwindcss and I want to directly open the modal after clicking "edit" button. Currently after clicking the "edit" button I get another button to open the modal, which works fine, but it is not as I would like to have it. I am using tailwindcss-stimulus-components and this is my code. They say that I should make sure that `data-modal-open-value` is set on the controller element or data-modal-open-value may be set to true to open modal on page load. How to do it?
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.
format.html { redirect_to projects_path, notice: "Project was successfully created." }in the create action. If I remove the:
It works fine, though it is still coming through as turbo_stream fomat.
Thanks!
data-turbo: { false }Unrelated (sort of): Do you know how I can just dismiss the modal instead of allowing it to redirect? In my case, I have loaded a form for one entity that has a link to open the form (new) for another entity that opens in the modal. When I finish creating that secondary entity, I want to update a dropdown in the first form with the new record added to it and selected. I've got the adding and selecting working. I am just not sure how to dismiss the modal after the secondary entity has been successfully created.
Thanks again for your help. This was really the only video I've watched that made sense to me. I just walked through all the steps and everything became much clearer. Nice job!
I wrote the following which will reset the Turbo Frame tag whenever the modal is hidden:
const modalElement = document.getElementById('remote_modal'); modalElement.addEventListener('hidden.bs.modal', event => { var newTurboFrameTag = document.createElement("turbo-frame"); newTurboFrameTag.setAttribute("id", "remote_modal"); modalElement.replaceWith(newTurboFrameTag); });i'm using bootstrap ,rails 7.1.1 and ruby 3.2.2
ActionController::UnknownFormat in EmployeesController#new
request.variant: []
Thank you for the awesome video.
I am using tailwindcss and I want to directly open the modal after clicking "edit" button. Currently after clicking the "edit" button I get another button to open the modal, which works fine, but it is not as I would like to have it. I am using tailwindcss-stimulus-components and this is my code. They say that I should make sure that `data-modal-open-value` is set on the controller element or data-modal-open-value may be set to true to open modal on page load. How to do it?
This is my code:
<%= turbo_frame_tag :remote_modal, target: :_top do %> <div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1" class="relative z-10"> <a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">Open Modal</a> <!-- Modal Background --> <div class="hidden fixed inset-0 bg-black bg-opacity-80 overflow-y-auto flex items-center justify-center" data-modal-target="background" data-action="click->modal#closeBackground" data-transition-enter="transition-all ease-in-out duration-300" data-transition-enter-from="bg-opacity-0" data-transition-enter-to="bg-opacity-80" data-transition-leave="transition-all ease-in-out duration-300" data-transition-leave-from="bg-opacity-80" data-transition-leave-to="bg-opacity-0"> <!-- Modal Container --> <div data-modal-target="container" class="max-h-screen w-full max-w-lg relative"> <!-- Modal Card --> <div class="m-1 bg-white rounded shadow"> <div class="p-8"> <h2 class="text-xl mb-4">Large Modal Content</h2> <%= render "project/form", project: project %> <div class="flex justify-end items-center flex-wrap mt-6"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close:prevent">Close</button> </div> </div> </div> </div> </div> </div> <% end %>