handle form component visibility with javascript
hey folks, i ran into the following problem.
using the form builder i render a survey that has a lot of subquestions (a question only visible if a certain answer was given). locally everything is fine. however live it feels very slow (especially with throttled network) and if you make multiple clicks per second (e.g. checkbox list), you even loose state because of the re-render.
now my idea is to initially render all the questions and do the show/hide part with javascript.
what is your suggested approach on tackling this issue? is there a
hidden()/visible() javascript counterpart to the already available methods? how do you track the state in the browser? is there some kind of obejct i can hook into?
fyi: additional i use a wizard to display only small chunks of the survey at once.
any kind of input/ideas highly appreciated!2 Replies
Hm, this is unfortunately one of the limitations of Livewire. There is no built-in JS-equivalent of
visible(). You could try adding your own via ->setExtraAttributes() and Alpine. Not sure how far you'd get with that.
Maybe you can just add an loading indicator as soon as a request is made via wire:loading. Not sure whether that would work or make your form unusable.hey dennis, thanks for your answer.
at the moment i'm trying to add this functionality with alpine. since i have a lot of different form components, it's not that trivial and i have to take care of a lot of edge cases (also i'm kind of confused that not every component has
setExtraInputAttributes() and if not setExtraAttributes() sets the attributes on the input and not on the wrapper component).
since you guys dealt with all this quirks already i just wanted to check in, if there is no better solution.
btw: is there some kind of javascript object where filament tracks the state?