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
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
