FullCalendar

Question

继续我之前的，我有另一个问题。有时在 Full Calendar 的 Select 事件中，当 bootstrap modal 打开 jquery 时，未填写模态中的表单输入。

当这发生在第 console.log($('#salas-date_begin').length); return 0 行时。这主要发生在 Firefox 并且当我的计算机同时处理多个东西时。

事件是：

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');
    },

所有代码：

<?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

我认为找到了解决方案。可能有时当 shown.bs.modal 被触发时表单尚未完全加载。

首先 show modal 加载消息（建议），load 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'));
            }
        });
  }

FullCalendar - Bootstrap 模式 "shown.bs.modal" 有时不工作

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

firefox

jquery

bootstrap-modal

yii2