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>
  • Вопрос задан
  • 522 просмотра
Пригласить эксперта
Ответы на вопрос 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 код нужно иницилизировать заново
Ответ написан
Ваш ответ на вопрос

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

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