0

I'm using Fullcalendar Js (5.6) and laravel lilvewire on a laravel application (8.75).

I create a calendar and display some events on it. I make a modal which opened when I click on an event. This modal contains a form with filled inputs with event informations.

Here it's how I render the form with filled inputs :

eventClick: info => {

  info.jsEvent.preventDefault();

  let modal = document.getElementById('modal')

  let deleteBtn = modal.querySelector('#delete')

  if(deleteBtn.hasAttribute('hidden')) {
    deleteBtn.removeAttribute('hidden') 
  } 

  if(info.event.extendedProps.report) {
    deleteBtn.setAttribute('disabled', '')
  } else {
    deleteBtn.removeAttribute('disabled')
  }

  modal.querySelector('#modal-title').innerText = 'Modify an event'
                                       
  modal.querySelector('input[id="title"]').setAttribute('value', info.event.title)

  if(info.event.extendedProps.description != null) {
                                            
    modal.querySelector('input[id="description"]').setAttribute('value', info.event.extendedProps.description)
  }
                                        
  modal.querySelector('input[id="start"]').setAttribute('value', (new Date((info.event.start).toString().split('GMT')[0]+' UTC').toISOString()).substr(0,23))

  if(info.event.allDay) {
                                            
    modal.querySelector('input[id="allDay"]').setAttribute('checked', true)
  }

}

When I submit my form to update the title for example ("newTitle"), I can see changes on the calendar view but if I clicked again on the event I've changed, title input is empty (other datas are correct and well displayed on the inputs). If I clicked on another event that is not modified I have the same issue, empty title and other datas correct and well displayed.

I logged :

  • infos.event.title

-> result : newTitle -> The new title is correct on the event informations

  • modal.querySelector('input[id="title"]')

-> result : <input id="title" type="text" value="newTitle"> -> The DOM input element has the correct value

  • modal.querySelector('input[id="title"]').value.length

-> result : 0 -> It's weird that the length of value is zero??

It was an example with title but I have the same weird behavior with the other inputs if I modify them.

Here is my Calendar component where I get events :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Event;
use App\Models\Client;
use Illuminate\Support\Arr;

class Calendar extends Component
{
    public $events = [];
    public $clients = [];


    public function mount($events)
    {
        $this->events = json_encode($events);
    }

    public function render()
    {
        return view('livewire.calendar');
    }

    public function eventUpdate($event)
    {
        $e = Event::find($event['id']);
        $e->title = $event['title'];
        $e->description = $event['description'];
        $e->start = $event['start'];
        $e->end = $event['end'];
        $e->allDay = $event['allDay'];

        if($e->isDirty()) {
            $e->update($event);
        }
    }
}

I've already try to get the events on the render method and call @this.render() after submitting the form but it's still the same. If I reload the page after submitting, all is correct, title is well displayed even on the calendar view than into the modal when I clicked on it.

Does anyone can see the issue that can cause this on my code?

Thanks a lot

Petitemo
  • 85
  • 2
  • 10
  • Question: why are you using `setAttribute` instead of just accessing the `value` property directly? You can shorten your selector too. I'd expect `modal.querySelector('input[id="title"]').setAttribute('value', info.event.title)` can be just `modal.querySelector('#title').value = info.event.title;` and it ought to work better - please try that (on all your similar lines, not just the title). I am not 100% certain (hence not an answer at this point) but I think it should help. – ADyson Jan 12 '23 at 12:08
  • An attribute in the HTML and the actual value of the property in the DOM may appear to be the same thing, but they're actually not. When the page is loaded and the DOM model is built in the browser's memory, any attribute values at that time are used to populate the equivalent DOM values, but if you change an attribute value later on, it doesn't necessarily update the DOM property as well. See https://stackoverflow.com/a/6004028/5947043 for a more detailed explanation. Note how the "value" field in particular is _not_ a reflected property. – ADyson Jan 12 '23 at 12:09

0 Answers0