Level 1
same!
3 likes
Aug 1, 2023
6
Level 1
wire:navigate and modal issue
Hi,
I have a problem to trigger a modal since the implementation of the navigate.
Livewire component MODAL :
public ?string $view = null;
public array $params = [];
public bool $show = false;
#[On('modal')]
public function modal(string $component, ?array $params = null)
{
$this->view = $component;
$this->params = $params;
$this->show = true;
}
public function render()
{
return view('livewire.modal');
}
Livewire view MODAL :
<x-modal wire:model="show">
@if ($view != null)
@livewire($view, $params, key(time()))
@endif
</x-modal>
I call the component like this :
<x-form.info-button wire:click="$dispatch('modal', { component: 'file-upload' })">
Everything works... except when I change pages and come back to the page with the button present (the click no longer works). The problem appeared from wire:navigate...
Issue : Uncaught (in promise) undefined livewire.js?id=777821c0:273
Some help ? Thank you !
Level 8
I've just run into the same issue. Has anyone managed to come up with a solution?
2 likes
Level 1
Same!
1 like
Level 1
Hi, I experienced this, and I managed to overcome it,
Method 1: using livewire teleport
so what you have to do is use livewire Teleport, you can read the documentation on livewire
Method 2: replace the javascript modal function to alpinejs
So this method is that you have to change the way you display the modal from the previous one (using the default JavaScript from the template perhaps), now replace it using the Alpine JS function
I hope I helped, never give up!
Level 1
I found a fix. In my case, I was using wire-elements/modal package, which injects a livewire element just before the </body> tag.
All I needed to fix it was to wrap the @livewire('wire-elements-modal') in the @persist directive, which looks like this.
@persist('modal')
@livewire('wire-elements-modal')
@endpersist
I found this in the Livewire 3 docs #Persisting elements across page visits.
I hope this fixes it for you guys too ❤️🙏
2 likes
Level 1
@angus_mcritchie Thanks mate, it works!
Please or to participate in this conversation.