villiwalla
@villiwalla
HTML-верстка

Почему не работает kartik DateTimePicker подтягиваемый ajax-ом?

Есть форма, где создаётся множество интервалов дат и кнопка добавить интервал. Нажимая на кнопку добавить интервал подтягивается шаблон где есть два виджета датапикера, начало, конец и чекбокс. Когда шаблон вставлен в dom то клик по иконке календаря не открывает календарь для выбора даты и времени. Если в основной вьюхе вызвать 2 виджета то они работают, но вот, если даже сделать $().clone() строки с этими узлами дома (клон должен и энвенты копировать).

Но после клона вторая строка с виджетами также не работает.

в колтроллере:
public function actionAddTime() {
        $this->layout= false;
        return $this->render('_datetime');
    }


Во вьюхе:
<div id="date-and-time"> </div>
<?
$jsAddTimeTpl = <<<JS

$('#add-datetime').click(function(e) {
  e.preventDefault(false);
  
  $.post('/panel/events/add-time', {}, function(data) {
      $('#date-and-time').append(data);
  });
  
  
});

JS;

$this->registerJs($jsAddTimeTpl);
?>


партиал виьюхи для строки с пикерами дат:
use yii\helpers\Html;
use kartik\datetime\DateTimePicker;
?>

<div class="col-md-4" style="margin: 0 0 15px 0">
    <?= DateTimePicker::widget([
        'value' => '',
        'options' => ['placeholder' => 'Укажите дату начала события'],
        'name' => 'EventsDate[end_date][]',
        'removeButton' => false,
        'pluginOptions' => [
            'weekStart' => 1,
            'autoclose' => true,
            'format' => 'yyyy-mm-dd HH:ii',
            'todayHighlight' => true
        ]
    ]); ?>
</div>
<div class="col-md-4" style="margin: 0 0 15px 0">
    <?= DateTimePicker::widget([
        'value' => '',
        'options' => ['placeholder' => 'Укажите дату начала события'],
        'name' => 'EventsDate[end_date][]',
        'removeButton' => false,
        'pluginOptions' => [
            'weekStart' => 1,
            'autoclose' => true,
            'format' => 'yyyy-mm-dd HH:ii',
            'todayHighlight' => true
        ]
    ]); ?>
</div>
<div class="col-md-4" style="padding-top: 15px;">
    <label for="events-repeat" style="margin-right: 15px">Повторяющийся событие?</label>
    <?= Html::checkbox('EventsDate[repeat]', '', ['id' => 'events-repeat']) ?>
</div>
  • Вопрос задан
  • 599 просмотров
Пригласить эксперта
Ответы на вопрос 2
@BorisKorobkov
Web developer
1. clone() копирует DOM, а не JS
2. даже если скопировать JS, то он так и будет продолжать ссылаться на исходный объект $('#add-datetime')
3. при загрузке HTML аяксом не загружается JS. Потому что registerJs() запоминает нужный код, но он там и остается (при обычной загрузке он выводится $this->head() в layouts/main.php)
Ответ написан
sanchezzzhak
@sanchezzzhak
Ля ля ля...
После получения html из ajax, js код нужно иницилизировать заново
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы