Filament•6mo ago

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:

```php <div x-data="counter"> <h1 x-text="count"></h1> </div> ...

Jump to solution

23 Replies

Dennis Koch•6mo ago

How can call method inside the script?

In what script? setTime() from javascript If you want to "start" that from JS, I think there is a $this->js() or similar method

ZoltarOP•6mo ago

yes in setTime method, but need to call livewire action

Dennis Koch•6mo ago

Ah, you want to call Livewire from JS. That should be $wire.yourMethod() if you are inside a LW component

ZoltarOP•6mo ago

I'm inside custom page, I tried like this but if I try to use @script and @endscript by embedding the javascript code it gives me an error

ZoltarOP•6mo ago

ZoltarOP•6mo ago

can't I use pure javascript code?

ZoltarOP•6mo ago

Dennis Koch•6mo ago

It's an Alpine error so where are you using this inside Alpine? You just showed in in <script> tags?

ZoltarOP•6mo ago

not use alpine but pure js

@script
                            <script>
                                //let minutesLabel = document.getElementById("minutes");
                                let secondsLabel = document.getElementById("seconds");
                                let totalSeconds = {{$record->tempo_max}};
                                setInterval(setTime, 1000);

                                function setTime() {
                                    --totalSeconds;
                                    secondsLabel.innerHTML = totalSeconds;
                                    //secondsLabel.innerHTML = pad(totalSeconds % 60);
                                    //minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
                                    
                                    let contatore = document.getElementById('contatore');
                                    contatore.value = totalSeconds;
                                    contatore.dispatchEvent(new Event('input'));

                                    if(totalSeconds == 0) {
                                        let simulate_timer_ko = document.getElementById('simulate_timer_ko');
                                        simulate_timer_ko.dispatchEvent(new Event('click'));
                                    }
                                }

                                /*
                                function pad(val) {
                                    var valString = val + "";
                                    if (valString.length < 2) {
                                        return "0" + valString;
                                    } else {
                                        return valString;
                                    }
                                }
                                */
                            </script>
                            @endscript

@script
                            <script>
                                //let minutesLabel = document.getElementById("minutes");
                                let secondsLabel = document.getElementById("seconds");
                                let totalSeconds = {{$record->tempo_max}};
                                setInterval(setTime, 1000);

                                function setTime() {
                                    --totalSeconds;
                                    secondsLabel.innerHTML = totalSeconds;
                                    //secondsLabel.innerHTML = pad(totalSeconds % 60);
                                    //minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
                                    
                                    let contatore = document.getElementById('contatore');
                                    contatore.value = totalSeconds;
                                    contatore.dispatchEvent(new Event('input'));

                                    if(totalSeconds == 0) {
                                        let simulate_timer_ko = document.getElementById('simulate_timer_ko');
                                        simulate_timer_ko.dispatchEvent(new Event('click'));
                                    }
                                }

                                /*
                                function pad(val) {
                                    var valString = val + "";
                                    if (valString.length < 2) {
                                        return "0" + valString;
                                    } else {
                                        return valString;
                                    }
                                }
                                */
                            </script>
                            @endscript

Dennis Koch•6mo ago

But you error says Alpine Expression Error so it looks like you are using this somewhere inside Alpine? Where are you using that code?

ZoltarOP•6mo ago

look screenshot the script is inside a blade view blade view linked to custom page Could it be that within the @script tags I can only use alpine code?

Dennis Koch•6mo ago

Can you share the whole page? Maybe as a Gist if it gets to big?

ZoltarOP•6mo ago

yes wait view_page.php

ZoltarOP•6mo ago

message.txt

ZoltarOP•6mo ago

blade view

ZoltarOP•6mo ago

message.txt

LeandroFerreira•6mo ago

I would use alpine https://codepen.io/KevinBatdorf/pen/xxVVoaX?editors=1010

Kevin Batdorf

CodePen

$interval - Alpine.js Magic Helpers Demo 1

...

ZoltarOP•6mo ago

ok try this

Dennis Koch•6mo ago

Hm. The Blade file looks good to me 🤔

ZoltarOP•6mo ago

yes the file is ok and the script work...but I wanted to use wire call inside js. just for code cleanup i use this script but count go down by 2 at time... 20 18 16 14 every one second i tryed with this.count-- and --this.count with same result 🤬

<div>
                                <div x-data="timer()" x-init="init()">
                                    <div>
                                        <span x-text="count"></span>
                                    </div>
                                </div>
                            </div>

                            <script>
                                function timer() {
                                    return {
                                        count: {{$record->tempo_max}},
                                        init() {
                                            setInterval(() => {
                                                this.count--;
                                            }, 1000);
                                        },
                                    }
                                } 
                            </script>

<div>
                                <div x-data="timer()" x-init="init()">
                                    <div>
                                        <span x-text="count"></span>
                                    </div>
                                </div>
                            </div>

                            <script>
                                function timer() {
                                    return {
                                        count: {{$record->tempo_max}},
                                        init() {
                                            setInterval(() => {
                                                this.count--;
                                            }, 1000);
                                        },
                                    }
                                } 
                            </script>

ok fixed...remove x-init="init()"

Solution

Zoltar•6mo ago

<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

ZoltarOP•6mo ago

working script

LeandroFerreira•6mo ago

much better than JS 👌

Gaming

Programming

use pure javascript in livewire