Loosing a really good project because of the slowness in loading components
How can we make the input fields hide/show conditionally without sending requests to the server?
I am developing a car booking project and there my client wants to use the form which loads the form components quickly like we use javascript to show/hide input fields which is much faster than FilamentPHP sending request to server and render it again.
I am using a Repeater with displays conditionally but it is quite slow like it takes 1.2 to 1.5 seconds to load even for a fresh project in production. Also the conditional input fields load slow as compared to the project (angular project) client is currently using and he says the speed is the main part of this form.
Please let me know how can I make the components show/hide dynamically based on other form inputs but not send requests to server at all.
Thank you
Solution:Jump to solution
I figured it out by adding variables in CreateBooking.php and set the value of each show/hide to those variables as well and then using them with x-init.
It worked great...
27 Replies
Add alpine classes, also V4 will have this
Please is it possible to give me an example, that will help me a lot.
I am basically very stressed about it as client said if it doesn't work then it is a deal-breaker. he is happy with all the features it has but only need to fix the speed issue.
for example I have this repeater
For now it probably would be best to write your own repeater on Alpine basis or try setting some Alpine via
extraAttributes (I don't have experience with this).
Or wait ~2 more months for v4.2 more months is a long time for client to wait but I can try with extraAttributes, please let me know if there is any documentation for this? or if you could please give me a sample code to work on?
thank you so much.
I got it to work by adding extraAttribute with conditional hidden class but since the passenger_type field is live it still sends the request to server
It will only send it if you set it as Live
yes, but if it is not live then I am not able to conditionally display/hide the repeater.
is it possible to just use javascript in extraAttribute to display/hide the repeater please without using live() on passenger_type ?
thank you
Sorry to interrupt/hijack but what are the exact improvements in v4 that will help with this? Is it for repeater only, or is it more general improvements to performance/loading? I remember reading something about livewire partials, is it related to that?
JS helpers like this
->visibleJs()/->hiddenJs(). Partials are another part.
Not sure if that would be possible right now via ->extraAttributes() could work too (via $wire.?)Thank you so much. I feel like I am getting somewhere with this.
Really appreciate your help
I will check if $wire works
Hello again,
I used this with service_type Select component
->extraInputAttributes([
'x-init' => 'open = $wire.data.service_type == "hourly"; $refs.service_hours.style.display = open ? "block":"none"',
'x-on:change' => 'open = $wire.data.service_type == "hourly"; $refs.service_hours.style.display = open ? "block":"none"; $refs.service_hours.required = open',
])
and used x-ref = service_hours on the service_hours field and it seems to work really good. However I also want it to be able to set the required status from true or false according to the value for open. $refs.service_hours.required = true or false isn't working.
Please advice what to do here?
Thank you
Will the new v4 help in a senario such as:
Sum on all fields in a repeater as the user types ( live() ) and adding value to another form component ? This would be amazing to not be constantly sending requests back to the server. And also ideally for the whole page not to be rendering each time. This would be perfect for an invoice : estimate type page.
Sorry OP for hijacking your thread.
However, are you sure there is not another reason for the 1-2 second slowness ? Db properly indexed etc ? Server spec okay ?
@David | Fortune Validator it is a fresh project, with no data in that table 8 GB ram and is a VPS with very good bandwidth. It also takes this its time on local server but better than production server.
I feel like AlpineJs will solve the issue and I am working on it but struggling a bit because of validations.
You can try
setAttribute("required", "") but I think .required = true should work, too. Is client side validation turned off? 🤔required true works but that little * is not being added unless I make it live()
setAttribute will change its own attribute where as I am changing it for referenced element.
it validates even if it doesn't add the * to it on submit
Iirc there’s a markAsRequired() method to force the *
@awcodes thank you, is it possible to do it using the $refs alpine js ?
$refs.service_type.style.display works $refs.service_type.required doesn't but I managed to add it using document.getElementById('data.service_type').required = true
I don’t think so. The label itself checks against $isRequired to render it. And that happens server side.
yes true, I am trying not to send any request to server except for 1 field
Could possibly use js to target the label and append the * with its html tags.
Even if it works and there is a change in textcolumn with live() the fields I hid or showed using alpine appears again as default state
Seems like over kill though.
I am not worried about the * though as it comes back when the submit button is pressed or any live input is used. But the hidden fields by alpine js comes back 😦
The styling done to the fields just re-renders and removes the styling
Wish I had a solid answer for you
No problem, thank you for trying 🙂
Solution
I figured it out by adding variables in CreateBooking.php and set the value of each show/hide to those variables as well and then using them with x-init.
It worked great
$show_service_hours = false;
and then also set $wire.show_service_hours = open with x-on:change
Thank you so much every one.