#Call to a function when Livewire opens Modal

23 messages · Page 1 of 1 (latest)

dull bramble
#

Good day,

at the moment I use a modal to inform the user that the download starting soon, but it is at the moment "pointless" because the modal shows up the moment the download starts.
May it help to see what I mean here:
https://syntafin.de/s/7WaMD

When a user press download, the image will be processed and then send to the user.
At first I set the value for the modal inside the function that generates the image, but even if I seperate them, and call the function then, it shows up when the image is send to the user.

What I tried is to use wire:init inside the modal, but this will be executed on load, what means every time a user opens an image, they will get a file download.

Anyone here an idea how I can solve this?

dull bramble
#

No one an idea how to archive this shyblob ?

rancid quartz
#

@dull bramble i checked your site and you're doing a lot of unnecessary polling

#

also just add a event listener and emit that after opening the modal

dull bramble
dull bramble
rancid quartz
#

personally i like to use the native event listener instead of livewire's so like in the client you can add an event such as window.addEventListener('downloadImage', function (event) { event.detail.path -- contains path to the download? });

and on the livewire side you open modal and do ```php
$this->dispatchBrowserEvent('downloadImage', ['path' => $path]);

#

you obviously need to implement the download function in js with the data the server provides from event which is trivial

dull bramble
#

Is it possible to trigger a server side function via event listener?

#

For information, this is how it works ATM:

    public function downloadModal() 
     { 
          $this->downloadModal = true; 
  
         return $this->download(); 
     }
rancid quartz
#

you can trigger the functions from js within the event listener or wherever you want

#

so on the download button you can add an onclick that calls the downloadModal function and then actually downloads the image after the call is finished

# 
function downloadImage() {
  @this.downloadModal()

... code to download image
}``` and then you can remove $this->download(); i assume it just streams the image
#

images should be downloaded from a cdn instead of being streamed from your server directly imo

rancid quartz
#

i think the first suggestion where the server triggers a client side event listener after it has rendered the new livewire view is the better way to go about things

dull bramble
pure quail
#

You can delay download so the displayed modal can be useful you can also make use of wire:loading

#

If you want to avoid flickering because loading is very fast, you can add the .delay modifier, and it will only show up if loading takes longer than 200ms.

heady anchor
#

You can call that method in alpine js

#

Lets say isModalOpen is false by default. When you open modal its set to true, what you can do is watch the value of isModalOpen in x-init and then call that method like $wire.loadUsers()