Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Livewire dispatching event modal with a dynamic content

Im trying to show the user the times when he’s available by days and display them in a modal.

public function searchAvailability(){
        $this->validate();
        $doctor = Doctor::where('id',$this->selectedDoctor)->first(); 
        $doctorTimes = DoctorTime::where('doctor_id',$this->selectedDoctor)->get();
        $parsedDate = Carbon::parse($this->selectedDate);

        $dayName = $parsedDate->format('l');
        
        if ($parsedDate->isFuture()) {
            foreach($doctorTimes as $doctorTime){
                if ($doctorTime->day == $dayName) {
                    $this->availableOn = DoctorTime::where('doctor_id',$this->selectedDoctor)
                    ->where('day',$doctorTime->day)->where('is_taken',0)->get();
                }
            }
            if (count($this->availableOn) > 0) {
                $this->dispatch('loading-success',
                title: 'Search Availability',
                );
            }
}


protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];

public function showTimesModal() { 
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);
}

here im listening for the events:

window.addEventListener('loading-success', (event) =>{ 
    let data = event.detail
    let timerInterval;

    Swal.fire({
        title: data.title,
        timer: 2000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft()}`;
            }, 100);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    })
    .then((result) => {
        if (result.dismiss === Swal.DismissReason.timer) {
            Livewire.dispatch('showModal');
        }
    });
})

protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];`


public function showTimesModal(){         
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);         
}

<div class="modal fade"  id="showTimes" tabindex="-1" aria-labelledby="showTimes" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> ...

@script
    $wire.on('appointment-modal', (availableOn) => {
        console.log(availableOn);
        const myModal = new bootstrap.Modal('#showTimes');
        myModal.show();
    });
@endscript

I have tried to loop on the data like that

availableOn.forEach(time => { 
    let timeElement = document.createElement('p'); 
    timeElement.textContent = time.start_time + ' - ' + time.end_time; 
    modalBody.appendChild(timeElement) 
    const myModal = new bootstrap.Modal('#showTimes'); 
    myModal.show();

but the modal disappear!

Overall, the code orchestrates the flow of searching for availability, displaying a success message, and showing the modal window with available times using Laravel (PHP), JavaScript (with SweetAlert and Livewire), and Bootstrap for styling the modal.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the previous code, I had a problem because I was passing availableOn as an argument. That's why it didn't work. Here is the correct code: @script 

        $wire.on('appointment-modal', async (event) => {
    let data = await event.availableOn; 
    console.log(data);
    
    const modalBody = document.getElementById('modal-body'); 
    data.forEach(time => { 
        console.log(time.day)
    let timeElement = document.createElement('p'); 
    timeElement.textContent = time.start_time + ' - ' + time.end_time; 
    modalBody.appendChild(timeElement);
    });
    const myModal = new bootstrap.Modal('#showTimes'); 
    myModal.show();

    });
</script>
@endscript

  2. 0

    Livewire will repaint the HTML elements unless you instruct it otherwise. Do to so, you can add wire:ignore.self, which will tell Livewire to not modify that element.

    <div class="modal fade" id="showTimes" wire:ignore.self tabindex="-1" aria-labelledby="showTimes" aria-hidden="true"> 
    <div class="modal-dialog modal-dialog-centered"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                ...

    See the related Livewire documentation: https://livewire.laravel.com/docs/wire-ignore

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search