yii\bootstrap\Modal should render the modal HTML at the end of the page body

[machour]

Scenario : I'm in a form (A), and I use yii\bootstrap\Modal to open a new form (B) used to add a new option in my dropDownList() located in A. (see attached screenshot for better understanding)

I want the modal toggle button to be displayed near the dropDownList(), so I go ahead and do :

echo $form->field($model, 'project_id')->dropDownList(ArrayHelper::map(Project::find()->all(), 'id', 'label'), ['prompt' => Yii::t('app', 'Select a project')]);
Modal::begin([
     'header' => '<b>' . Yii::t('app', 'Create new project') . '</b>',
     'toggleButton' => ['label' => '+', 'href' => Url::to(['/Bcontroller/ajaxCreate'])],
]);
Modal::end();

Problem : when generated, the B form will be nested in the A form, which brakes things.

Possible solution : a possible solution would be to render the toggleButton right away, as it is done now, but delay all the modal markup & content to View::EVENT_END_BODY, to make sure that if the modal contains a form, it won't be nested in an other one.

I'd cook a patch but I'm not sure how the modal content should be captured with Yii development guidelines. Please advise if a patch like this would be acceptable.

[Faryshta]

this can be done using the yii\widget\Block widget.

dealing with the Modal and ActiveForm can be tricky, for example one of the issues i encountered

Modal::begin([
     'header' => '<b>' . Yii::t('app', 'Create new project') . '</b>',
     'footer' => Html::submitButton(Yii::t('app', 'Save')),
]);

$form = ActiveForm::begin();

echo $form->field($model, 'proyecto');

ActiveForm::end();

Modal::end();

In this case the submitButton will be rendered outside the active form, so clicking not do anything unless you also write your own code in js.

The best way to solve it is to start the ActiveForm before the Modal. I can even use the other parts of the modal to add more fields.

$form = ActiveForm::begin();

Modal::begin([
    'header' => '<b>' . Yii::t('app', 'Create new project') . '</b>',
    'footer' => Html::submitButton(Yii::t('app', 'Save')) . ' '
        . $form->field($model, 'subscribe'), // Subscribe checkbox
]);

echo $form->field($model, 'proyecto');

Modal::end();

ActiveForm::end();

Using Blocks could be a bit more job but it will be more flexible so tha anyone can choose where to put the code of their modals

On your layout

$this->beginBlock('modalContainer', true);
$this->endBlock();

Then on your view

$this->beginBlock('modalContainer');

$form = ActiveForm::begin();

Modal::begin([
    'header' => '<b>' . Yii::t('app', 'Create new project') . '</b>',
    'footer' => Html::submitButton(Yii::t('app', 'Save')) . ' '
        . $form->field($model, 'subscribe'), // Subscribe checkbox
]);

echo $form->field($model, 'proyecto');

Modal::end();

ActiveForm::end();

$this->endBlock()

[machour]

@Faryshta the problem with the Block solution is that Modal currently outputs both toggleLink and modal structure right away. I could use the Block to place the Modal outside my form, but then the toggleLink will be outside too.
I know I'm addressing a rather particular issue here (nested forms), but I think my suggested solution solves it properly while not breaking BC for other uses.

[Faryshta]

How I solved that same issue

// put this anywhere you want, it will create your modal button
<?= Html::button(Yii::t('app', 'New User'), [
    // other options
    'data' => [
        'toggle' => 'modal',
        'target' => '#userModal',
   ],
]) ?>

And the modal widget will look like

Modal::begin([
    'id' => '#userModal',
    // other options
]);

// content

Modal::end();

[yii-bot]

Issue moved to yiisoft/yii2-bootstrap#109