DEV Community

loading...

Discussion on: How to use modals with forms in Rails using Turbo

Collapse
dstull profile image
Doug Stull Author

Yep...that could likely be refactored to only put in one edit modal for entire page as an optimization

Collapse
dstull profile image
Doug Stull Author

I've fine tuned this a bit to only edit one modal - could likely go further and make it one modal skeleton/post-modal stimulus controller instance for entire page if desired. Let me know what you think - gitlab.com/doug.stull/turbo_modal

Thread Thread
dstull profile image
Doug Stull Author

I've further refactored it now to only render a modal skeleton once and utilize that for both new and edit and updated this post - thanks for the nudge in a better direction!

Thread Thread
matiascarpintini profile image
Matias Carpintini

Do you know how we can run some JS when form appends? I'm using selectize, the first time works with turbo:loads, but not then because turbo just fires when the history changes :/

Thread Thread
dstull profile image
Doug Stull Author

I don’t know how...yet. I had same issue with wanting to trigger showing the modal when it was finished rendering. In my case I hacked it with a 200ms timeout in the post-modal controller. Maybe someone will come along with an a solution.

Thread Thread
matiascarpintini profile image
Matias Carpintini

Hahaha yes, I think that too but it didn't works in slow conections

Thread Thread
dstull profile image
Doug Stull Author • Edited

So I have an initial work-around - not what I'd consider a final solution(it works), so I opened an Merge Request while I think about it more - should likely try to figure out what magic connect is using instead of creating a new stimulus controller.

gitlab.com/doug.stull/turbo_modal/...

edit:

And here is more of the turbo way to do it, though I have some reservations that it is the event I need to listen to...will have to try initializing something JS wise like a select element to feel confident in this approach

gitlab.com/doug.stull/turbo_modal/...

Thread Thread
matiascarpintini profile image
Matias Carpintini

This is my temporary solution (it sucks, i know πŸ˜‚):

$(document).on("turbo:before-fetch-response", function(){
var checkExist = setInterval(function () {
if ($('.selectize#item_category_ids').length) {
$(".selectize#item_category_ids").selectize({
create: function (input, callback) {
$.ajax({
method: "POST",
url: "/categories.json",
data: { category: { name: input } },
success: function (response) {
// call callback with the new item
callback({ value: response.id, text: response.name });
}
});
},
});
clearInterval(checkExist);
}
}, 100);
});

Thread Thread
dstull profile image
Doug Stull Author • Edited

I don't think it is that bad actually.

However, I think this is the correct solution

see my latest commit on gitlab.com/doug.stull/turbo_modal/...

reasoning:

  • from this line it looks like connect is the only thing that is sure that the stream as finished rendering.

See if that works for you?

Thread Thread
matiascarpintini profile image
Matias Carpintini

Awesome, thank you!

Thread Thread
dstull profile image
Doug Stull Author

Thank you, for providing great feedback that helped with the iteration here! I tried this solution with slim select and of course the customary console.log debugging and it seems to work for me, so I merged it and updated the blog post.

Forem Open with the Forem app