I need support because my javascript data is not updating when the livewire component gets re-rendered.
I use Fullcalendar in a livewire component
<div>
{{ dump($events) }} {{-- ⬅️[1] --}}
<x-card class="mt-4">
<div id='calendar'></div>
</x-card>
@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales/de.js'></script>
<script>
document.addEventListener('contentChanged', function() {
console.log(@js($events)); // ⬅️[3]
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
// ⬇️[2]
var data = @js($events);
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: "de",
events: JSON.parse(data).map((event) => ({
...event,
backgroundColor: event.title < 3 ? '#B23220' : (event.title < 11 ? '#C3B031' : '#20B22C'),
borderColor: event.title < 3 ? '#B23220' : (event.title < 11 ? '#C3B031' : '#20B22C'),
})),
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
loading: function(isLoading) {
if (!isLoading) {
this.getEvents().forEach(function(e){
if (e.source === null) {
e.remove();
}
});
}
},
});
calendar.render();
@this.on(`refreshCalendar`, () => {
calendar.refetchEvents()
});
});
</script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
@endpush
</div>
In my class I have $this->dispatchBrowserEvent('contentChanged'); in the render method.
When I update $events I see the updated data in the dump [1] but events [2] is not updated.
The log [3] shows always the same events
Since you've pushed the script out of your component (which is a good idea), it will not be touched when Livewire is re-rendering and doing its DOM-diffing.
So instead, you can pass the event-data as a parameter which you can accept in the event-listener.
So, add the data with the event,
$this->dispatchBrowserEvent('contentChanged', $this->events);
And accept it in the listener, by passing e into the callback (which is the event-object), and access the data in e.detail.
document.addEventListener('contentChanged', function(e) {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var data = e.detail;
// ...
use dehydrate function instead of render function
public function dehydrate(){
$this->dispatchBrowserEvent('contentChanged', $this->events);
}