Модальная форма не работает в Yii2 с AdminLTE - PullRequest
Новая
       34

Модальная форма не работает в Yii2 с AdminLTE

0 голосов
/ 14 июня 2019

Я создал веб-приложение, используя Yii2 с темой adminLTE. я пытаюсь сделать модальную форму в своем веб-приложении, я пробовал в Yii2 без adminLTE, он работает нормально, как это:

without AdminLTE

Я сделал то же самое в Yii2 с adminLTE, это не удалось, когда я нажал кнопку, он ничего не сделал, и я попытался сделать inspectElement, и я получил это:

with AdminLTE

Это мой взгляд на index.php : 

<?php

use yii\helpers\Html;
use kartik\detail\DetailView;
use kartik\grid\GridView;
use yii\helpers\Url;
use yii\bootstrap\Modal;

/* @var $this yii\web\View */
/* @var $modelTrip backend\models\TripsSchedule */
\yii\web\YiiAsset::register($this);
?>

<p>
    <?= Html::button('Add Schedule', ['value' => Url::to('/intra/admin/bus-passengers/create'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>
</p>

<?php
Modal::begin([
    'header' => '<h4>Add Passenger</h4>',
    'id' => 'modal',
    'size' => 'modal-lg',
]);

echo "<div id='modalContent'><div>";
Modal::end();
?>
<div>
    <?=
    DetailView::widget([
        'model' => $modelTrip,
        'id' => $modelTrip->tripScheduleId,
        'responsive' => true,
        'enableEditMode' => false,
        'condensed' => true,
        'hover' => true,
        'mode' => DetailView::MODE_VIEW,
        'mainTemplate' => '{detail}',
        'attributes' => [
            [
                'attribute' => 'departureTime',
                'label' => 'Departure Time',
                'value' => function ($form, $widget) {
                    $model = $widget->model;
                    return date('H:i', strtotime($model->departureTime)) . ' WIB';
                },
            ],
        ],
    ])
    ?>

</div>

Это код в контроллер : 

public function actionCreate()
{
    $model = new BusPassengers();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->busPassengerId]);
    }

    return $this->renderAjax('create', [
        'model' => $model,
    ]);
}

Вы можете видеть, это ничего не отображало. Нужно ли добавлять еще один дополнительный код, потому что я использую adminLTE?

Обновление

Вот JS: 

$(function () {
$('#modalButton').click(function () {
    $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
});
});

Обновление

Вот исходный вид и скриншот консоли

console

source

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Эта строка не нужна, если у вас уже есть файл макета, поэтому, пожалуйста, удалите это 

\yii\web\YiiAsset::register($this);

также, пожалуйста, убедитесь, что файл jquery загружен перед вашим кодом js, иначе он не будет работать, так как модал начальной загрузки зависит от jQuery (проверьте консоль).

Или, в конце, вы можете добавить JS-код в виде Yii: 

    <?php
$script = <<< JS

$('#modalButton').click(function () {
    $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
});

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

Дайте мне знать, если это работает, или, пожалуйста, опубликуйте скриншот viewSource и консоли.

Спасибо

Обновление

Попробуйте заменить этот блок кода, и он будет работать:

1. JS 

  <script type="text/javascript">
        function showModal() {
        $('#passenger_modal').modal('show');
        $('#passenger_modal_content').load("<?=Yii::getAlias('@web')?>/intra/admin/bus-passengers/create");
        }
        </script>

2. КНОПКА 

<p>
    <?= Html::button('Add Schedule', ['class' => 'btn btn-success', 'onClick'=>'showModal()']) ?>
</p>

3. МОДАЛЬНЫЙ БЛОК 

<?php
Modal::begin([
    'header' => '<h4>Add Passenger</h4>',
    'id' => 'passenger_modal',
    'size' => 'modal-lg',
]);

echo '<div id="passenger_modal_content"><div>';
Modal::end();
?>

Я просто меняю идентификаторы блоков, но это не имеет значения.

0 голосов
/ 14 июня 2019

Я полагаю, у вас есть некоторый код в JS-файлах вашей темы, которые отображают модальные сообщения. Потому что у вас есть этот код: 

echo "<div id='modalContent'><div>";

Это то, что я могу вам сказать прямо сейчас.Пожалуйста, опубликуйте свои файлы JS, и после этого мы сможем выяснить, откуда возникла проблема.

...