I am requesting data using pjax on click of checkbox… At first load it works fine but when pjax response inserts the data. It show datetimepicker is not a function.
My view looks like
$this->title = 'Review Lessons';
?>
<?php $form = ActiveForm::begin(); ?>
<div class="pull-right m-r-20">
<div class="schedule-index">
<div class="e1Div">
<?= $form->field($searchModel, 'showAllReviewLessons')->checkbox(['data-pjax' => true]); ?>
</div>
</div>
</div>
<?php ActiveForm::end(); ?>
<?php
$columns = [
[
'label' => 'Date/Time',
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'date',
'format' => 'datetime',
'refreshGrid' => true,
'headerOptions' => ['class' => 'kv-sticky-column bg-light-gray'],
'contentOptions' => ['class' => 'kv-sticky-column'],
'editableOptions' => function ($model, $key, $index) {
return [
'header' => 'Lesson Date',
'size' => 'md',
'inputType' => \kartik\editable\Editable::INPUT_WIDGET,
'widgetClass' => '\bootui\datetimepicker\DateTimepicker',
'options' => [
'format' => 'YYYY-MM-DD hh:mm A',
'stepping' => 15,
],
'formOptions' => ['action' => Url::to(['lesson/update-field'])],
'pluginEvents' => [
'editableError' => 'review.onEditableError',
'editableSuccess' => 'review.onEditableGridSuccess',
],
];
},
],
[
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'duration',
'refreshGrid' => true,
'value' => function ($model, $key, $index, $widget) {
return (new \DateTime($model->duration))->format('H:i');
},
'headerOptions' => ['class' => 'kv-sticky-column bg-light-gray'],
'contentOptions' => ['class' => 'kv-sticky-column'],
'editableOptions' => function ($model, $key, $index) {
return [
'header' => 'Lesson Duration',
'size' => 'md',
'inputType' => \kartik\editable\Editable::INPUT_WIDGET,
'widgetClass' => 'bootui\datetimepicker\Timepicker',
'options' => [
'format' => 'HH:mm',
'stepping' => 15,
],
'formOptions' => ['action' => Url::to(['lesson/update-field'])],
'pluginEvents' => [
'editableSuccess' => 'review.onEditableGridSuccess',
],
];
},
],
];
?>
<?=
\kartik\grid\GridView::widget([
'dataProvider' => $lessonDataProvider,
'pjax' => true,
'pjaxSettings' => [
'neverTimeout' => true,
'options' => [
'id' => 'review-lesson-listing',
],
],
'columns' => $columns,
'emptyText' => 'No conflicts here! You are ready to confirm!',
]);
?>
<script>
var review = {
onEditableError: function (event, val, form, data) {
// do something
},
onEditableGridSuccess: function (event, val, form, data) {
$.ajax({
url: "<?php echo Url::to(['lesson/fetch-conflict', 'courseId' => $courseId]); ?>",
type: "GET",
dataType: "json",
success: function (response)
{
// do something
}
});
return true;
}
}
$(document).ready(function () {
$("#lessonsearch-showallreviewlessons").on("change", function () {
var showAllReviewLessons = $(this).is(":checked");
var vacationId = '<?= $vacationId; ?>';
var vacationType = '<?= $vacationType; ?>';
var params = $.param({'LessonSearch[showAllReviewLessons]': (showAllReviewLessons | 0),
'Vacation[id]': vacationId, 'Vacation[type]': vacationType
});
var url = "<?php echo Url::to(['lesson/review', 'courseId' => $courseModel->id]); ?>?" + params;
$.pjax.reload({url: url, container: "#review-lesson-listing", replace: false, timeout: 4000}); //Reload GridView
});
});
</script>
and my controller is:
public function actionReview($courseId)
{
$model = new Lesson();
$searchModel = new LessonSearch();
$request = Yii::$app->request;
$lessonSearchRequest = $request->get('LessonSearch');
$showAllReviewLessons = $lessonSearchRequest['showAllReviewLessons'];
$vacationRequest = $request->get('Vacation');
$courseRequest = $request->get('Course');
$enrolmentRequest = $request->get('Enrolment');
$endDate = $enrolmentRequest['endDate'];
$enrolmentEditType = $enrolmentRequest['type'];
$rescheduleBeginDate = $courseRequest['rescheduleBeginDate'];
$vacationId = $vacationRequest['id'];
$vacationType = $vacationRequest['type'];
$courseModel = Course::findOne(['id' => $courseId]);
$conflicts = [];
$conflictedLessonIds = [];
if(!empty($enrolmentEditType) && $enrolmentEditType === Enrolment::EDIT_LEAVE) {
$lessons = Lesson::find()
->where(['courseId' => $courseModel->id, 'lesson.status' => Lesson::STATUS_SCHEDULED])
->andWhere(['>=', 'lesson.date', (new \DateTime($endDate))->format('Y-m-d')])
->unInvoicedProForma()
->all();
foreach ($lessons as $lesson) {
$conflicts[$lesson->id] = [];
}
$query = Lesson::find()
->where(['courseId' => $courseModel->id, 'lesson.status' => Lesson::STATUS_SCHEDULED])
->andWhere(['>=', 'lesson.date', (new \DateTime($endDate))->format('Y-m-d')])
->unInvoicedProForma();
} else {
$draftLessons = Lesson::find()
->where(['courseId' => $courseModel->id, 'status' => Lesson::STATUS_DRAFTED])
->all();
foreach ($draftLessons as $draftLesson) {
$draftLesson->setScenario('review');
if(!empty($vacationId)) {
$draftLesson->vacationId = $vacationId;
}
}
Model::validateMultiple($draftLessons);
foreach ($draftLessons as $draftLesson) {
if(!empty($draftLesson->getErrors('date'))) {
$conflictedLessonIds[] = $draftLesson->id;
}
$conflicts[$draftLesson->id] = $draftLesson->getErrors('date');
}
$query = Lesson::find()
->orderBy(['lesson.date' => SORT_ASC]);
if(! $showAllReviewLessons) {
$query->andWhere(['IN', 'lesson.id', $conflictedLessonIds]);
} else {
$query->where(['courseId' => $courseModel->id, 'status' => Lesson::STATUS_DRAFTED]);
}
}
$lessonDataProvider = new ActiveDataProvider([
'query' => $query,
]);
return $this->render('_review', [
'courseModel' => $courseModel,
'courseId' => $courseId,
'lessonDataProvider' => $lessonDataProvider,
'conflicts' => $conflicts,
'rescheduleBeginDate' => $rescheduleBeginDate,
'searchModel' => $searchModel,
'vacationId' => $vacationId,
'vacationType' => $vacationType,
'endDate' => $endDate,
'model' => $model,
'enrolmentEditType' => $enrolmentEditType
]);
}
Any lead would be appreciated. Thanks