How to regenerate a modal with an active form?

I am running in to this issue that when I create a modal with an active form, and I close the modal without submitting the form, it doesn’t get reset when I try to recreate it.

Basically I want to load a different model by changing the parameters the button sends to the controller, while using the same action. However it looks like the action only executes the first time.

I use the following code for the button

<div class="btn-group">
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Create <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><?php echo Html::a('From Library', ['/library/physical/create', 'params' => ['type_id' => PhysicalTypes::ControlModule]]);?></li>
      <li class="divider"></li>
      <li><?php echo Html::a('Area', ['create-modal','params' => ['type_id' => PhysicalTypes::Area,]], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponentcreate']);?></li>
      <li><?php echo Html::a('Process Cell', ['create-modal','params' => ['type_id' => PhysicalTypes::ProcessCell,]], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponentcreate']);?></li>
      <li><?php echo Html::a('Unit', ['create-modal','params' => ['type_id' => PhysicalTypes::Unit,]], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponentcreate']);?></li>
      <li><?php echo Html::a('Equipment', ['create-modal','params' => ['type_id' => PhysicalTypes::Equipment,]], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponentcreate']);?></li>
      <li><?php echo Html::a('Control Module', ['create-modal','params' => ['type_id' => PhysicalTypes::ControlModule,]], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponentcreate']);?></li>
   </ul>
</div>

Then in my controller I use the following

public function actionCreateModal(array $params)
{
    ...

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->renderAjax('_modal_form', [
        'actionTitle' => 'Create new',
        'model' => $model,
    ]);

}

And at last my modal code that gets rendered.

<?php
  use yiihelpersHtml;
  use yiiwidgetsActiveForm;
  use yiihelpersArrayHelper;
  use yiihelpersStringHelper;

?>
<?php 
$form = ActiveForm::begin(
    ['enableClientValidation' => true, 'options' => ['id' => 'modal-form']]);
?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><?= $actionTitle ?> <?= StringHelper::basename(get_class($model)); ?></h4>
</div>
<div class="modal-body">
    ...
</div>
<div class="modal-footer">
    <?php echo Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

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

So I want to be able to close the window, click a different button, and load a new model into the modal. All help is appreciated!

Answer

there is already a solution to this problem: reload-content-in-modal-twitter-bootstrap (your problem is more Bootstrap related)

In short, you will need to remove modal data on “hidden.bs.modal” event.

Bootstrap 3

$this->registerJs(<<<JS
$(document).on('hidden.bs.modal', function (e) {
        $(e.target).removeData('bs.modal');
    });
JS
);

Advertisement

Answer