Question 15134 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel V8.83 + livewirehow can I inform the frontend while running long methods on backend

I’ve got some long running methods on my laravel application – some run about 8 minutes. How can I, in Laravel 8 and Livewire 2, setup up an information system which shows a little flash window that e.g. "Step x is done" and Step y is now running?

example:

 `public function updateData()
{
    $this->updateStatus = 'x wird aktualisiert...';
    sleep(2);
    $this->updateStatus = 'y wird aktualisiert...';
    sleep(2);
    $this->updateStatus = 'Alle Daten wurden aktualisiert.';
}`

Livewire never shows me the updateStatus message… 🙁
Where is the best point to start learning about this?

Thank you!

Stev

Ps: also tried to put the above example into pieces: and also didn’t work as expected .. after 14 seconds I see only the finished text thats it…

 public function updateData()
{
    $this->updateStatus = 'x wird aktualisiert...';
    $this->render();
    sleep(2);
    $this->updateData2();

}

protected function updateData2(){
    $this->updateStatus = 'y wird aktualisiert...';
    $this->render();
    sleep(2);
    $this->updateData3();
}

protected function updateData3(){
        sleep(10);
    $this->updateStatus = 'Alle Daten wurden aktualisiert.';
    $this->render();
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    for @ll coming here having the same question and for me :): in your bladefile of your livewire component:

      <div id="app">
        <span x-text="message">         Content...     </span>
        <div x-data="{ message: @entangle('updateStatus') }">
            <button @click="$wire.updateData().then(() =>
    {$wire.updateData2().then(()=> {
       });})"> try me
            </button>

        </div>
    </div>

    and in your component:

      public function updateData()
{
    $this->updateStatus = 'x wird aktualisiert...';

    sleep(2);


}

public function updateData2(){
    $this->updateStatus = 'y wird aktualisiert...';
           sleep(2);

}

  2. 0

    Livewire has good support with alpinejs.

    Use Livewire in AlpineJs with $wire

    $wire.someMethod(someParam).then(result => { ... })

    or you can use

    let foo = await $wire.someMethod(someParam)

    For more check this https://laravel-livewire.com/docs/2.x/alpine-js

    Instead of using wire:click="updateData" you ahould use

    <button x-on:click="$wire.updateData().then(() => {message = "done"})">update</button>
<span x-text="message">Content...</span>

    Also here we run in javascript via alpinejs with $wire and run function sequential with using then then and then .Running updateData() that run other function can’t do here.

    You should do something like this

    <button x-on:click="$wire.step1().then(() => {message = "first done"; $wire.step2().then(()=> {message = "first done";$wire.step3()})})">update</button>
<span x-text="message">Content...</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search