Goal
Using the Hotwire, show how to setup a basic implementation of a modal with a form.
We'll break this down into talking about the c...
For further actions, you may consider blocking this person and/or reporting abuse
I don't like the fact of render edit partial on each iteration :/
Yep...that could likely be refactored to only put in one edit modal for entire page as an optimization
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
I've further refactored it now to only render a modal skeleton once and utilize that for both
newandeditand updated this post - thanks for the nudge in a better direction!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 :/
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.
Hahaha yes, I think that too but it didn't works in slow conections
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
connectis using instead of creating a new stimulus controller.gitlab.com/doug.stull/turbo_modal/...
edit:
And here is more of the
turboway 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 approachgitlab.com/doug.stull/turbo_modal/...
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);
});
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:
connectis the only thing that is sure that the stream as finished rendering.See if that works for you?
Awesome, thank you!
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.logdebugging and it seems to work for me, so I merged it and updated the blog post.I've updated the code used in this post with the latest release of turbo. I had to change how things loaded a bit and rely on turbo include tag to load turbo correctly. Webpack loading was having issues with any update of turbo-rails past 0.5.3.
Latest commit shows the updates gitlab.com/doug.stull/turbo_modal/...