yii2 - 보기로 리디렉션하지 않고 모달 양식을로드하고 ajax를 통해 데이터 제출

Yii2 프로젝트에는 두 가지 모델이 있습니다. 하나의 모델 : ApartmentBuilding  다른 모델에 따라 다릅니다 : Caretaker  관계를 통해. 내가 ApartmentModel 를 만들고 있다고 가정  내가 caretaker 를 선택하는 양식을 통해  동적 드롭 다운에서 그런 다음 필요한 관리인이 데이터베이스에 아직 추가되지 않았 음을 알고 있으므로 ApartmentBuilding 에서 관리인의 세부 정보를 추가해야합니다  모델 양식은 ApartmentBulding 의 세부 사항을 작성 진행  형태. 이것이 내 문제의 유스 케이스입니다.

지금까지 Caretaker 를 시작했습니다   ApartmentBulding 의 모달을 통한 모델 형식  형태. 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  보기 및 양식 작성과 같은 다른 여러 모달에서 재사용됩니다. 모달 핸들러 코드는 main.php 에 있습니다.  레이아웃 폴더의