Question

我使用具有adminLTE主题的Yii2构建了一个Web应用程序。我正在尝试在我的Web应用程序中创建模态表单，我在没有adminLTE的Yii2中尝试了它的工作原理，如下所示：

我在yiLTE2中使用adminLTE进行了同样的操作，但失败了，当我单击按钮时，它什么也没做，我尝试做inspectElement，我得到了：

这是我在 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'));
});
});

更新

这是视图源和控制台屏幕截图

Answer 1

我想您的主题JS文件中有一些代码可以呈现模式提交。因为您有以下代码：

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

这就是我现在可以告诉您的。请发布您的JS文件，然后我们可以找出问题的根源。

Answer 2

如果您已经有一个布局文件，则不需要此行，因此请删除此行

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

还请确保在您的js代码之前加载了jquery文件，否则它将不起作用，因为引导方式取决于jQuery（请检查您的控制台）。

或者最后，您可以以Yii方式添加js代码：

    <?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();
?>

我只是更改块的ID，但这没关系。

Answer 3

这个更新的版本对我有用，问题是我的布局页脚被隐藏并用这个问题解决方案显示为模态体

Yii2 和管理：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>

模态表单在带有AdminLTE的Yii2中不起作用

更新

更新

3 个答案: