My first stack overflow question. Web development hobbyist and learner here. Grateful for any help at all.
I'm using Laravel 10 and livewire 3 with an alertifyjs CDN link. I have an "Add to wishlist" button on my individual product livewire view:
<div class="mt-2">
<a href="" class="btn btn1"> <i class="fa fa-comments" aria-hidden="true"></i> Enquire</a>
<button type="button" wire:click="addToWishList({{ $motors->id }})" class="btn btn1"> <i class="fa fa-heart"></i> Add To Wishlist </button>
</div>
I'm dispatching an event from the livewire component, as per the livewire docs. A different message text should be dispatched, depending on if user has already added this product to user's wishlist or not.
public function addToWishList($motorId)
{
if(Auth::check())
{
if(Wishlist::where('user_id', Auth::id())->where('motor_id', $motorId)->exists())
{
// session()->flash('message', 'Already added to wishlist');
$this->dispatch('message', [
'text' => 'Already added to wishlist'
]);
return false;
}
else
{
Wishlist::create([
'user_id' => Auth::id(),
'motor_id' => $motorId
]);
// session()->flash('message', 'Wishlist updated successfully');
$this->dispatch('message', [
'text' => 'Wishlist updated successfully'
]);
}
}
else
{
return redirect()->route('login');
}
}
Then I listen for the 'message' event in my blade layout that loads with every front end page and also contains all my CSS and scripts.
<body>
@livewireScripts
{{-- jquery --}}
<script src="{{ asset('assets/js/jquery-3.7.0.min.js') }}"></script>
{{-- bootstrap --}}
<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
{{-- aleritfyjs --}}
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script>
window.addEventListener('message', event => {
alertify.set('notifier','position', 'top-right');
alertify.success('hey '+(event.detail.text)+'!');
});
</script>
<div id="app">
@include('layouts.inc.frontend.navbar')
<main>
@yield('content')
</main>
</div>
</body>
Problem description:
The alertify does only appear when I hit the wishlist button. it doesn't trigger when I load the page. Which seems to indicate the dispatched event is being picked up. But my event.detail.text is returning 'undefined'. How I know that is because when I concatenate it with some plain text like 'hey '+(event.detail.text)+'!', it displays "hey undefined !"
If anyone can work out what I'm doing wrong or what the issue is, it would be much appreciated.
I was expecting it to pick up the 'text' item in the array
$this->dispatch('message', [
'text' => 'Wishlist updated successfully'
]);
and display the message string in the alert. The plain text that I concatenate around 'event.detail.text' displays perfectly, but for some reason event.detail.text returns undefined.
The alertify message does appear only when I click the button which runs the addToWishList() function which dispatches events. So it does seem the event is being received, but somehow the 'text' property doesn't contain the message.
OK I solved this. I guess the syntax with the array I was using in the livewire component was used in an older version of Livewire.
The syntax that worked in Livewire 3.0 is:
Now this.event.text contains the appropriate message.