Yii2：加载模态表单并通过 Ajax 提交数据而不重定向到视图

Question

我的 Yii2 项目中有两个模型。一个模型：ApartmentBuilding 依赖于另一个模型：Caretaker 通过关系。假设我通过一个表单创建一个ApartmentModel，我从动态下拉列表中选择caretaker。然后我意识到我需要的看守人尚未添加到数据库中，因此，我必须从ApartmentBuilding 模型表单中添加看守人的详细信息，然后继续填写ApartmentBulding 表单的详细信息。这就是我的问题的用例。

到目前为止，我已经成功地通过ApartmentBulding 表单的模态启动了Caretaker 模型表单。提交Caretaker 模型表单的详细信息后，站点将重定向到CaretakerController 的视图。但是，我需要的是能够使用我刚刚通过模式添加的看守人的新详细信息来刷新下拉表单，并能够继续填写表单的其余部分。

任何破解此问题的帮助将不胜感激。

到目前为止，这是我的代码：

公寓大楼_form.php

<?php

use yii\helpers\Html;
use kartik\widgets\ActiveForm;
use app\models\Landlord;
use app\models\Caretaker;
use yii\helpers\ArrayHelper;
use yii\bootstrap\Button;
use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $model app\models\ApartmentBuilding */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="apartment-building-form">

    <?php $form = ActiveForm::begin([
        'type' => ActiveForm::TYPE_HORIZONTAL,
        'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_TINY],
    ]); ?>

    <?= $form->field($model, 'apartment_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'landlord_id')->dropDownList(ArrayHelper::map(Landlord::find()->select(['landlord_id', 'first_name', 'last_name'])->all(), 'landlord_id', 'displayName'),['class' => 'form-control inline-block', 'prompt'=>'Select Landlord']) ?>

    <?= $form->field($model, 'physical_address')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'plot_number')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'address')->widget(\kalyabin\maplocation\SelectMapLocationWidget::className(), [
        'attributeLatitude' => 'latitude',
        'attributeLongitude' => 'longitude',
        'googleMapApiKey' => 'YOUR_API_KEY_HERE',
    ]) ?>

    <?= $form->field($model, 'number_of_floors')->textInput() ?>

    <?= $form->field($model, 'apartment_desc')->textInput(['maxlength' => true]) ?>

    <div class="form-group kv-fieldset-inline">
        <?= Html::activeLabel($model, 'caretaker_id', ['label'=>'Caretaker', 'class'=>'col-sm-3 control-label']) ?>
        <div class="col-sm-8">
            <?= $form->field($model, 'caretaker_id',['showLabels'=>false])->dropDownList(ArrayHelper::map(Caretaker::find()->select(['caretaker_id', 'first_name', 'last_name'])->all(), 'caretaker_id', 'displayName'),['class' => 'form-control inline-block', 'prompt'=>'Select Caretaker']) ?>
        </div>  
        <div class="col-sm-1">
            <?= Html::button('<i class="glyphicon glyphicon-plus"></i>', ['value'=>Url::to(['caretaker/new']), 'title' => 'Create New Caretaker', 'class' => 'btn btn-success showModalButton']) ?>
        </div>
    </div>

    <?= $form->field($model, 'other_apt_details')->textInput(['maxlength' => true]) ?>

    <div class="col-sm-offset-3 col-sm-9">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
        <?= Html::resetButton('Reset', ['class' => 'btn btn-default']) ?>
    </div>

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

</div>

管理员_form.php

<?php

use yii\helpers\Html;
use kartik\widgets\ActiveForm;
use kartik\widgets\DatePicker;

/* @var $this yii\web\View */
/* @var $model app\models\Caretaker */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="caretaker-form">

    <?php $form = ActiveForm::begin([
        'type' => ActiveForm::TYPE_HORIZONTAL,
        'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_TINY],
    ]); ?>

    <?= $form->field($model, 'first_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'last_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'sex')->dropDownList(['Male' => 'Male', 'Female' => 'Female'],['prompt'=>'Select Sex']) ?> 

    <?= $form->field($model, 'date_of_birth')->widget(DatePicker::classname(), ['options' => ['placeholder' => 'Enter birth date ...'], 'pluginOptions' => ['autoclose'=>true, 'format' => 'yyyy-mm-dd']]) ?>

    <?= $form->field($model, 'address')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'mobile')->widget(\yii\widgets\MaskedInput::className(), ['mask' => '254999999999',]) ?>

    <div class="col-sm-offset-3 col-sm-9">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
        <?= Html::resetButton('Reset', ['class' => 'btn btn-default']) ?>
    </div>

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

</div>

CaretakerController actionNew()

public function actionNew()
{
    $model = new Caretaker();
    $model->company_id = Yii::$app->user->identity->company_id;

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return false;
    } else {
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

模态处理程序：

<?php
yii\bootstrap\Modal::begin([
    'headerOptions' => ['id' => 'modalHeader'],
    'id' => 'modal',
    'size' => 'modal-lg',
    //keeps from closing modal with esc key or by clicking out of the modal.
    // user must click cancel or X to close
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE]
]);
echo '<div id="modalContent"><div style="text-align:center"><?= Html::img("@web/img/loading.gif");?></div></div>';
yii\bootstrap\Modal::end();
?>

modal-popup.js

$(function(){
    //get the click of modal button to create / update item
    //we get the button by class not by ID because you can only have one id on a page and you can
    //have multiple classes therefore you can have multiple open modal buttons on a page all with or without
    //the same link.
//we use on so the dom element can be called again if they are nested, otherwise when we load the content once it kills the dom element and wont let you load another modal on click without a page refresh
      $(document).on('click', '.showModalButton', function(){
         //check if the modal is open. if it's open just reload content not whole modal
        //also this allows you to nest buttons inside of modals to reload the content it is in
        //the if else are intentionally separated instead of put into a function to get the 
        //button since it is using a class not an #id so there are many of them and we need
        //to ensure we get the right button and content. 
        // if ($('#modal').data('bs.modal').isShown) 
        if ($("#modal").data('modal') && $("#modal").data('modal').isShown){
            $('#modal').find('#modalContent')
                    .load($(this).attr('value'));
            //dynamically set the header for the modal
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {
            //if modal isn't open; open it and load content
            $('#modal').modal('show')
                    .find('#modalContent')
                    .load($(this).attr('value'));
             //dynamiclly set the header for the modal
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
    });
});

$(function(){
//load the current page with the conten indicated by 'value' attribute for a given button.
   $(document).on('click', '.loadMainContent', function(){
            $('#main-content').load($(this).attr('value'));
    });
});

注意 modal handler code 和 modal-popup.js 被其他几种模式重用，例如查看和创建表单。模式处理程序的代码位于 layouts 文件夹的 main.php 中。

Answer 1

我已经设法通过以下方式解决了这个问题（同样欢迎更多想法，我知道可能有更完美的方法）：

我在看守人_form.php中添加了以下Javascript代码

<?php
$this->registerJs("$('#createcaretaker').click(function() {
    var firstName = $('#caretaker-first_name').val();
    var lastName = $('#caretaker-last_name').val();
    var sex = $('#caretaker-sex').val();
    var dOB = $('#caretaker-date_of_birth').val();
    var address = $('#caretaker-address').val();
    var mobile = $('#caretaker-mobile').val();
    $('#modal').modal('hide');
    $.get('new?firstName='+firstName+'&lastName='+lastName+'&sex='+sex+'&dOB='+dOB+'&address='+address+'&mobile='+mobile, function(success){
        $('.refreshcaretaker').html(success);
    });
});");
?>

然后，同一个表单上的提交按钮，我改成：

<button id="createcaretaker" type="button" class="btn btn-success">Create</button>

因此，按钮 id 能够触发上面的Javascript 代码向服务器端发送数据。

然后我在ApartmentBuilding 控制器中创建了一个控制器动作来处理数据输入，如下所示：

public function actionNew($firstName, $lastName, $sex, $dOB, $address, $mobile)
{
    $model = new Caretaker();
    $model->company_id = Yii::$app->user->identity->company_id;

    if ($firstName != '0' && $lastName != '0' && $sex != '0' && $dOB != '0' && $address != '0' && $mobile != '0') {
        $model->first_name = $firstName;
        $model->last_name = $lastName;
        $model->sex = $sex;
        $model->date_of_birth = $dOB;
        $model->address = $address;
        $model->mobile = $mobile;
        $model->save();

        $caretakers = Caretaker::find()->all();
        foreach ($caretakers as $caretaker) {
            echo '<option value="'.$caretaker->caretaker_id.'">'.$caretaker->displayName.'</option>';
        }
    } else {
        return $this->renderAjax('caretaker_create', [
            'model' => $model,
        ]);
    }
}

完成后，我更改了父表单的下拉条目，以便能够在提交模态表单时通过 ajax 刷新其值以创建看守模型，如下所示：

<?= $form->field($model, '[{$i}]caretaker_id',['showLabels'=>false])->dropDownList(ArrayHelper::map(Caretaker::find()->select(['caretaker_id', 'first_name', 'last_name'])->all(), 'caretaker_id', 'displayName'),['class' => 'form-control inline-block refreshcaretaker', 'prompt'=>'Select Caretaker']) ?>

注意上面的Javascript代码在模态提交时触发的refreshcaretaker类。

下面的link 详细讨论了在 Yii2 中使用模态表单。