yii2 Select2 widget in form gets view render whole index in ajax with modal

[mati950708]

Hi, i´m having some issues with the kartik library, I noticed that whe I put the kartik library in the form, wich is render in Ajax and showed in a modal, a strange blink happens in the screen when the modal is loaded... It works... but after that blink if I click outside the modal or close it and try to "view" any item, my whole index ends up in ajax.

This is my _form:

`

<?php $form = ActiveForm::begin(); ?>
<div class="row">
    <div class="col-lg-6">
        <?=
        $form->field($model, 'user_id')->widget(Select2::classname(), [
                'data' => ArrayHelper::map(\common\models\User::find()->all(), 'id', 'username'),
                'options' =>
                    [
                        'prompt' => 'Elije el usuario',
                    ]
            ]
        )
        ?>
    </div>
    <div class="col-lg-6">
        <?=
        $form->field($model, 'estado_idestado')->widget(Select2::classname(), [
                'data' => ArrayHelper::map(\backend\models\Estado::find()->andFilterWhere(['>', 'idestado', 1   ])->all(), 'idestado', 'estado'),
                'options' =>
                    [
                        'prompt' => 'Elije el usuario',
                        'class' => 'hidden'
                    ]
            ]
        )
        //                        $("#order-sowingdatem").val(data);
        ?>
    </div>
</div>

<div class="form-group">
    <?= Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']) ?>
</div>

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

`

This is my controller:

`

/**
 * Creates a new RestriccionesDeUsuario model.
 * If creation is successful, the browser will be redirected to the 'view' page.
 * @return mixed
 */
public function actionCreate()
{
    $model = new RestriccionesDeUsuario();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        echo "<script>window.history.back();</script>";
        die;
    }

    return $this->renderAjax('create', [
        'model' => $model,
    ]);
}

/**
 * Updates an existing RestriccionesDeUsuario model.
 * If update is successful, the browser will be redirected to the 'view' page.
 * @param integer $id
 * @return mixed
 * @throws NotFoundHttpException if the model cannot be found
 */
public function actionUpdate($id)
{
    $model = $this->findModel($id);

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        echo "<script>window.history.back();</script>";
        die;
    }

    return $this->renderAjax('update', [
        'model' => $model,
    ]);
}`

the
echo "<script>window.history.back();</script>";
die;
is not part of the problem.

This is my view in the index after clicking on create/update, close the modal and click in view:

...I don´t really know how to put images here... so I think I will have to upload it somewhere and leave a link... sorry
https://drive.google.com/file/d/1zT9ToJyc5HnzHp-RoJu_DaF-TFyp2umz/view?usp=sharing

And the only thing I got is a warning in the console once it happens:

XMLHttpRequest.open @ index.php?r=cita:750 load (async) send @ jquery.js:9533 ajax @ jquery.js:9173 jQuery.fn.load @ jquery.js:9844 (anonymous) @ modal.js:23 dispatch @ jquery.js:5206 elemData.handle @ jquery.js:5014 [Deprecation] Synchronous XMLHttpRequest on the main thread is main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

At the end I just needed to put the ActiveFrom in the view and create a form, even if it´s empty, it will still work... however the black flash of the screen can be seen... do anybody knows how to solve it?

PS: I have other projects with the same libraries and this does not happens :(

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[dgtal24]

Same problem here. Even if loading in ajax but not in modal.
By the way, for DateControl, i solved the same problem executing

DateControl::widget([
            'name'=>'date_control_fix',
            'type'=>DateControl::FORMAT_DATE,
]);

(note, there's no need to echo) in a view which gets loaded without ajax. With this when the ajax view echoes the datecontrol widget i don't have the blink (probably there's some asset loading problem in ajax).
It's not great, but it fixes the problem. But it doesn't work with Select2

[kartik-v]

The renderAjax method re-registers all assets on your page again - which maybe registering JS/CSS again and overwriting markups - causing reinitializing of plugins and HTML content/markup and hence the behavior on the client will be specific to what you are rendering essentially. If some asset bundles are already registered on your page (depending on your view/page design) you may need to skip registering these asset bundles unnecessarily if not needed - (unset these selective asset bundles in your view selectively during the ajax render option).

In any case, more a UX/UI design issue that you may want to check - where one option is you may try to ensure that ajax based loads always hide your parent container and rather show a loading indicator with everything else hidden and after everything is done (ajax is complete) - show back the main container.

[kartik-v]

The other option is to avoid using renderAjax and use a normal renderPartial and rather use a PJAX Widget to dynamically render content and set pjaxContainerId property within the Krajee widget which will auto re-initialize the related Krajee jquery plugins after every pjax reload.