FullCalendar - Bootstrap Modal "shown.bs.modal" sometimes not working

Question

in continuation of my previous post, i have another problem. Sometimes in event Select of Full Calendar when bootstrap modal open the jquery not fill the form inputs in modal.

When this occurs in line console.log($('#salas-date_begin').length); return 0. This occurs principaly in Firefox and when my computer is processing multiples stuff at same time.

the event is:

select: function(start, end, jsEvent, view, resource) {
        $('#modal')
        .on('shown.bs.modal', function (e) {
           $('#salas-date_begin').val(moment(start).format('YYYY-MM-DD HH:mm'));
           $('#salas-date_end').val(moment(end).format('YYYY-MM-DD HH:mm'));
           console.log($('#salas-date_begin').length); //debug
        }).modal('show').find('#modalContent').load('http://url/create');
    },

all of code:

<?php

use kartik\export\ExportMenu;
use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\grid\GridView;
use yii\helpers\Json;
use yii\web\View;
use yii\widgets\Pjax;
/* @var $this yii\web\View */
/* @var $searchModel common\models\SalasSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Salas');
$this->params['breadcrumbs'][] = $this->title;

$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/moment.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

$script2 = <<< JS

$(document).ready(function() {
    $('#modal').on('hide.bs.modal', function (e) {
    console.log($(e.currentTarget).off('shown.bs.modal')); // or $(this)

    });
});
JS;
$this->registerJs($script2);

Modal::begin([
    'header' => '<b> NEW </b>',
    'id' => 'modal',
    'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();

?>


<div class="salas-index">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">

                        <link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.css">
                        <link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.css">

                        <div id='calendar-container'>
                            <div id="calendar" class="fc fc-ltr fc-unthemed"></div>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>

<?php

$script = <<< JS
    
  $('#calendar').fullCalendar({
    defaultView: 'agendaDay',
    locale: 'en-gb',
    contentHeight: 'auto',
    expandRows: true,
    height: '100%',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'timelineDay,agendaDay'
    },
    groupByResource: true,
    views: {
        timelineDay: {
        slotLabelFormat: ['HH:mm'],
        },
    },
    weekends: false,
    slotLabelFormat : "HH:mm",
    minTime: "08:00:00",
    maxTime: "17:00:00",
    slotLabelInterval: "01:00:00",
    slotDuration: '00:30:00',
    slotWidth: "50",
    slotEventOverlap: false,
    selectable: true,
    defaultDate: day,
    selectOverlap: false,
    displayEventTime: false,
    select: function(start, end, jsEvent, view, resource) {
        $('#modal')
        .on('shown.bs.modal', function (e) {
           $('#salas-date_begin').val(moment(start).format('YYYY-MM-DD HH:mm'));
           $('#salas-date_end').val(moment(end).format('YYYY-MM-DD HH:mm'));
           console.log($('#salas-date_begin').length); //debug
        }).modal('show').find('#modalContent').load('http://url/create');
    },
    eventClick: function(event, jsEvent, view) {
        $('#modal')
        .modal('show').find('#modalContent').load('http://url/update?id=' + event.id);
    },
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    resourceLabelText: 'Rooms',
    events: events
});

JS;
$this->registerJs($script);


?>

Answer 1

i think found the solution. probably sometimes the form not yet fully loaded when shown.bs.modal is fired.

Firt show modal with loading msg (suggestion), load form and wait for it to be loaded, if is loaded fill finally the form.

select: function(start, end, jsEvent, view, resource) {
        $('#modal').modal('show');
        $( "#modal #modalContent" ).load( "http://url/create", function( response, status, xhr ) {
            if(status === 'success') {
                $('#salas-date_begin').val(moment(start).format('YYYY-MM-DD HH:mm'));
                $('#salas-date_end').val(moment(end).format('YYYY-MM-DD HH:mm'));
            }
        });
  }