Modal Form not work in Yii2 with AdminLTE

Question

I built a web app using Yii2 with adminLTE theme. i'm trying to make modal form in my web app, I've tried in Yii2 without adminLTE it work fine like this:

I did the same way in Yii2 with adminLTE it failed, when I clicked the button, it didn't do anything, and I tried to do inspectElement and I got this:

This is my view in 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>

This is code in controller:

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

You can see, it didn't render anything. Do I need add another additional code because I'm using adminLTE?

Update

Here is the js:

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

Update

Here is the view source and console screenshot

Answer 1

this updated version worked for me problem was my layout footer was hidden and being shown with modal body with this question solution

Yii2 and adminlte : 2.4.13

 <?php
  Modal::begin([
'header' => '<h4><i class="fa fa-book" style="padding-right:5px"></i>' .
 $model->name 
. '</h3>',
'id' => 'modal',
'size' => 'modal-lg',
]);
?>

<?=  "<div id='modalContent'>" ?>
<?php
$form = ActiveForm::begin(); ?>

<div class="box box-info">
    <div class="box-body">

        <div class="form-group">
            <?= $form->field($chapter, 'name')->textInput() ?>
        </div>
        <div class="form-group">
            <?= $form->field($chapter, 'book_id')->hiddenInput(['value' => $model->id])->label(false); ?>
        </div>
        <div class="form-group">
            <?= $form->field($chapter, 'description')->textarea(['rows' => '6']) ?>
        </div>

    </div>
    <div class="box-footer">
        <?= Html::a('Cancel', ['index'], ['class' => 'btn btn-default']) ?>
        <?= Html::submitButton('Save', ['class' => 'btn btn-info pull-right']) ?>
    </div>

</div>

<?php ActiveForm::end();
Modal::end();
?>

" ?>

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

Answer 2

This line is not needed if you already have a layout file, so please remove this

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

also please make sure jquery file loaded before your js code else it will not work since bootstrap modal is depend on jQuery (please check your console).

Or at the end, your can add js code as Yii way:

    <?php
$script = <<< JS

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

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

Let me know if it work or please post screenshot of viewSource and console.

Thank you

Update

Try replace these code block and it will work:

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. BUTTON

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

3. MODAL BLOCK

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

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

I just change the id's of blocks but that is not matter at all.