Comment régénérer une modale avec un formulaire actif ?

Question

Je rencontre le problème suivant : lorsque je crée une fenêtre modale avec un formulaire actif, et que je ferme la fenêtre modale sans soumettre le formulaire, celui-ci n'est pas réinitialisé lorsque j'essaie de le recréer.

En fait, je veux charger un modèle différent en changeant les paramètres que le bouton envoie au contrôleur, tout en utilisant la même action. Cependant, il semble que l'action ne s'exécute que la première fois.

J'utilise le code suivant pour le bouton

<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>

Ensuite, dans mon contrôleur, j'utilise ce qui suit

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,
    ]);

}

Et enfin mon code modal qui est rendu.

<?php
  use yii\helpers\Html;
  use yii\widgets\ActiveForm;
  use yii\helpers\ArrayHelper;
  use yii\helpers\StringHelper;

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

Je veux donc pouvoir fermer la fenêtre, cliquer sur un autre bouton et charger un nouveau modèle dans la fenêtre modale. Toute aide est la bienvenue !

Answer 1

Il existe déjà une solution à ce problème : reload-content-in-modal-twitter-bootstrap (votre problème est plutôt lié à Bootstrap)

En bref, vous devrez supprimer les données modales sur l'événement "hidden.bs.modal".

Bootstrap 3

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