Level 63
Can you show your view in which you want to display the message ?
1 like
Sep 5, 2022
10
Level 10
livewire flash message is not showing up
I am trying to show a flash message, but somehow nothing is showing up. I have a child and a parent component and I am flashing the message in the child component. What I do is I refresh the parent component, but somehow the message is not showing up.
My parent component
class Jobs extends Component
{
use WithPagination;
public $search;
protected $listeners = ['refreshComponent' => '$refresh'];
protected $queryString = ['search'];
public function render()
{
$jobs = Job::with('user')->orderBy('created_at', 'DESC')->paginate(20);
return view('livewire.admin.job.jobs', ['jobs' => $jobs]);
}
}
my child component
public $job;
public function mount(Job $job)
{
$this->job = $job;
}
/**
* Remove the specified resource from storage.
*
* @param Job $job
* @return \Illuminate\Http\Response
*/
public function destroy(Job $job)
{
if (Storage::exists($job->logo)) {
Storage::delete($job->logo);
}
$job->delete();
session()->flash('success', 'Der Job wurde erfolgreich gelöscht.');
$this->closeModal();
$this->emit('refreshComponent');
}
public function render()
{
return view('livewire.admin.job.delete-job');
}
What I am doing wrong here? The parent component is refreshed so should get the session message?
Level 10
@vincent15000 Sure.
jobs
<div class="px-4 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-center">
@include('layouts.partials.success')
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">Stellenanzeigen</h1>
</div>
{{-- <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<button type="button"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 sm:w-auto">Neue
Anzeige</button>
</div> --}}
</div>
<div class="mt-8 flex flex-col">
@if (!$jobs->isEmpty())
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
Name</th>
<th scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Titel
</th>
<th scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Status
</th>
<th scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Erstellt am
</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Aktionen</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
@foreach ($jobs as $job)
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
<div class="flex items-center">
<div class="h-auto w-16 flex-shrink-0">
<img src="{{ asset($job->logo ?? 'images/default.svg') }}"
class="h-auto w-16 object-cover rounded"
alt="{{ $job->name }} logo" title="logo">
</div>
<div class="ml-4">
<div class="font-medium text-gray-900">
{{ $job->name }}</div>
@if(isset($job->user->email))
<div class="text-gray-500">{{ $job->user->email }}</div>
@endif
</div>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<div class="text-gray-900">{{ $job->title }}</div>
<div class="text-gray-500">{{ $job->activity }}</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
@if ($job->active())
<span
class="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">Aktiv</span>
@else
<span
class="inline-flex rounded-full bg-red-100 px-2 text-xs font-semibold leading-5 text-red-800">Inaktiv</span>
@endif
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<div class="text-gray-900">{{ $job->created_at->format('d.m.Y') }}</div>
</td>
<td
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="{{ route('admin.jobs.edit', $job) }}"
class="mr-3 px-4 py-2 rounded bg-lime-700 text-white hover:bg-lime-900 hover:text-accent whitespace-no-wrap">Editieren<span
class="sr-only"></span></a>
<button type="button"
onclick='Livewire.emit("openModal", "admin.job.delete-job", {{ json_encode(['job' => $job->id]) }})'
class="mr-3 px-4 py-2 rounded bg-red-700 text-white hover:bg-red-900 hover:text-accent whitespace-no-wrap">
Löschen
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="px-4 py-3 sm:px-6">
{{ $jobs->links() }}
</div>
@else
<p>Es sind noch keine Stellenanzeigen vorhanden.</p>
@endif
</div>
</div>
success.blade.php
@if (Session::has('success'))
<div class="bg-green-50 p-4 my-5 rounded">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/check-circle -->
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">{{ Session::get('success') }}</p>
</div>
</div>
</div>
@endif
2 likes
Level 122
Forget flashing via session when using Livewire.
It will only be stored, then retrieved from session on a full page request.
You need to use events.
3 likes
Level 10
@Snapey Thanks for the answer but how could that look like?
1 like
Level 122
@SmokeTM You might get an idea from https://talltips.novate.co.uk/livewire/sweetalert2-with-livewire although this is for sweetalert. The event is fired from the Livewire component and listened to in the page' javascript. You could open an alert or reveal a div when you hear this event.
2 likes
Level 10
@Snapey Tried now to implement that but the message shows up all the time. Added the dispatchEvent in my livewire component like so.
public function destroy(Job $job)
{
if (!is_null($job->logo) && Storage::exists($job->logo)) {
Storage::delete($job->logo);
}
$job->delete();
$this->closeModal();
$this->dispatchBrowserEvent('job-deleted', ['jobDeleted' => "Der Job wurde erfolgreicht gelöscht."]);
$this->emit('refreshComponent');
}
<div x-data="{ open: false }" @job-deleted.window="open = true">
<div class="bg-green-50 p-4 my-5 rounded">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/check-circle -->
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">Der Job wurde erfolgreich gelöscht.</p>
</div>
</div>
</div>
</div>
1 like
Level 122
@SmokeTM where do you use x-show to show/hide the message?
1 like
Level 10
@Snapey Thanks :) Sorry forgot to add it. One last thing I can't access my message in my success.blade Tried it like so.
<div x-data="{ open: false, message: ''}" @job-deleted.window="open = true" message=$event.detail.jobDeleted">
<div x-show="open" class="bg-green-50 p-4 my-5 rounded">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/check-circle -->
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800" x-text="message"></p>
</div>
</div>
</div>
</div>
1 like
Level 122
@SmokeTM perhaps a semicolon?
x-on:job-deleted.window="open = true; message=$event.detail.jobDeleted">
1 like
Level 10
@Snapey Thank you very much! I had to use x-on. @ didn't work.
Please or to participate in this conversation.