© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
34 replies
Zoltar

use pure javascript in livewire

hello,
i create a simple javascript timer in blade view
How can call method inside the script?
i tryed with {{ $this->method() }} but not work

Timer: <label id="seconds">{{$record->tempo_max}}</label>
<input type="hidden" id="contatore" wire:model="tempo_risposta">
                            
<script>
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = {{$record->tempo_max}};
    setInterval(setTime, 1000);

    function setTime() {
        --totalSeconds;
        secondsLabel.innerHTML = totalSeconds;
        
        var element = document.getElementById('contatore');
        element.value = totalSeconds;
        element.dispatchEvent(new Event('input'));

        
         if(totalSeconds == 0) {
           //ToDo call method 
        }
    }

</script>
Timer: <label id="seconds">{{$record->tempo_max}}</label>
<input type="hidden" id="contatore" wire:model="tempo_risposta">
                            
<script>
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = {{$record->tempo_max}};
    setInterval(setTime, 1000);

    function setTime() {
        --totalSeconds;
        secondsLabel.innerHTML = totalSeconds;
        
        var element = document.getElementById('contatore');
        element.value = totalSeconds;
        element.dispatchEvent(new Event('input'));

        
         if(totalSeconds == 0) {
           //ToDo call method 
        }
    }

</script>
Solution
<div x-data="counter">
   <h1 x-text="count"></h1>
</div>
                           
@script
<script>
    Alpine.data('counter', () => {
        return {
            count: {{$record->tempo_max}},
            init() {
                setInterval(() => {
                    --this.count;
                    if(this.count == 0) {
                        $wire.timer_ko();
                    }
                }, 1000);
            },
        }
    })
</script>
@endscript
<div x-data="counter">
   <h1 x-text="count"></h1>
</div>
                           
@script
<script>
    Alpine.data('counter', () => {
        return {
            count: {{$record->tempo_max}},
            init() {
                setInterval(() => {
                    --this.count;
                    if(this.count == 0) {
                        $wire.timer_ko();
                    }
                }, 1000);
            },
        }
    })
</script>
@endscript
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Livewire can use in resources
FilamentFFilament / ❓┊help
3y ago
Create a livewire component via javascript
FilamentFFilament / ❓┊help
2y ago
use filamentphp layout in livewire component
FilamentFFilament / ❓┊help
2y ago
How to use Livewire Component in Custom Page ?
FilamentFFilament / ❓┊help
3y ago