CODEWITHSUNDEEP
yii2dialogmodal-dialog
Tomas Grecio Ramirez
Tomas Grecio Ramirez

Reputation: 380

How to close boostrap Dialog in yii2?

I'm trying to do this:

  1. Open a bootstrap dialog with a button, through a URL. Action of the Url in controller is "myController/updateDialog".

  2. By open dialog, this loads a page (myController/updateDialog) with a form to fill data (form has a button to submit).

  3. If I submit the form by clicking the button, in my controller I tried close the dialog and refresh some things in the original page, this I do with JS. But it doesn't work. I always get the window navigator in the blank with the new URL; I expect to keep the original page where the dialog was invoked, to see the changes, same way that does CJUIDIALOG in Yii 1.x.

The controller's code is:

public function actionUpdatedialog($id)
{ 
   $model = $this->findModel($id);
    if ($model->load(Yii::$app->request->post() &&  $model->save() )) {           
       $this->view->registerJs("window.close(); window.opener.fn.yiiGridView.update('books-heads'); return false;",
            $this->view::POS_HEAD);//try close and finally 
     die(); //finally 

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

I tried, with :

"window.close();" and

"$(#Mymodal).modal('hide');" and others, but could not sort it out.

Upvotes: 0

Views: 2107

Answers (1)

Luna
Luna

Reputation: 2322

You should submit your form via ajax, accept and determine the return value. If it is successful, call $("#your modal box").modal('hide') to close your dialog. e.g:

public function actionUpdatedialog($id)
{ 
   $model = $this->findModel($id);
    if ($model->load(Yii::$app->request->post() &&  $model->save() )) {           
       \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
       return ['code' => 200, 'message' => 'success'];

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

In the page:

$("#formName").on('submit', function () {
    // or use ajax
    fetch(...).then(response => {
        response.json().then(json => {
            if (200 === json.code) {
                $("yourModalBox").modal('hide');
            } else {
                alert(json.message);
            }
        });
    });
});

Answer translation from Google Translate, hope this helps you.

Upvotes: 1

Related Questions