Yii2-modal-ajax-multiple

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside. It supports mutiple stacked modal windows, i.e. when you open one modal window containing a form to create associated data and that form also contains a button to open another modal window, it will work too.

This is a fork of loveorigami/yii2-modal-ajax and swilson1337/yii2-modal-ajax which is a slightly updated version. It solves lack of multiple stacked modal windows problem in the original Yii2 extension.

Installation

The preferred way to install this extension is through composer.

Either run

$ php composer.phar require --prefer-dist loveorigami/yii2-modal-ajax "@dev"

or add

"igorvolnyi/yii2-modal-ajax-multiple": "*"

to the require section of your composer.json file.

Usage

Controller

Extend your basic logic with ajax render and save capabilities:

public function actionCreate()
{
    $model = new Company();

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

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

to

public function actionCreate()
{
    $model = new Company();

    if ($model->load(Yii::$app->request->post())) {
        if ($model->save()) {             
            if (Yii::$app->request->isAjax) {
                // JSON response is expected in case of successful save
                Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
                return ['success' => true];
            }
            return $this->redirect(['view', 'id' => $model->id]);             
        }
    }

    if (Yii::$app->request->isAjax) {
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    } else {
        return $this->render('create', [
            'model' => $model,
        ]);
    }
}

View

use igorvolnyi\widgets\ModalAjaxMultiple;

echo ModalAjaxMultiple::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    // ... any other yii2 bootstrap modal option you need
]);

Usage in grid

Index View - Create (Single Modal Mode)

use igorvolnyi\widgets\ModalAjaxMultiple;

echo ModalAjaxMultiple::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default

    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax',

]);

Index View - Update (Multi Modal Mode)

Grid example with data-scenario

<a class="btn" href="/site/update?id=10" title="Edit ID-10" data-scenario="hello">Hello</a>
<a class="btn" href="/site/update?id=20" title="Edit ID-20" data-scenario="goodbye">Goodbye</a>

Modal Ajax with events

use igorvolnyi\widgets\ModalAjaxMultiple;

echo ModalAjax::widget([
    'id' => 'updateCompany',
    'selector' => 'a.btn' // all buttons in grid view with href attribute
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default

    'options' => ['class' => 'header-primary'],
    'pjaxContainer' => '#grid-company-pjax',
    'events'=>[
        ModalAjaxMultiple::EVENT_MODAL_SHOW => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                selector.addClass('warning');
            }
       "),
        ModalAjaxMultiple::EVENT_MODAL_SUBMIT => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                if(status){
                    if(selector.data('scenario') == 'hello'){
                        alert('hello');
                    } else {
                        alert('goodbye');
                    }
                    $(this).modal('toggle');
                }
            }
        ")
    ]

]);

Plugin Events

On top if the basic twitter bootstrap modal events the following events are triggered

kbModalBeforeShow (ModalAjaxMultiple::EVENT_BEFORE_SHOW)

This event is triggered right before the view for the form is loaded. Additional parameters available with this event are:

• xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
• settings: object, the jQuery ajax settings for this transaction.

$('#createCompany').on('kbModalBeforeShow', function(event, xhr, settings) {
    console.log('kbModalBeforeShow');
});

kbModalShow (ModalAjaxMultiple::EVENT_MODAL_SHOW)

This event is triggered after the view for the form is successful loaded. Additional parameters available with this event are:

• data: object, the data object sent via server's response.
• status: string, the jQuery AJAX success text status.
• xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
• selector: object, the jQuery selector for embed logic after submit in multi Modal.

$('#createCompany').on('kbModalShow', function(event, data, status, xhr, selector) {
    console.log('kbModalShow');
});

kbModalBeforeSubmit (ModalAjaxMultiple::EVENT_BEFORE_SUBMIT)

This event is triggered right before the form is submitted. Additional parameters available with this event are:

• xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
• settings: object, the jQuery ajax settings for this transaction.

$('#createCompany').on('kbModalBeforeSubmit', function(event, xhr, settings) {
    console.log('kbModalBeforeSubmit');
});

kbModalSubmit (ModalAjaxMultiple::EVENT_MODAL_SUBMIT)

This event is triggered after the form is successful submitted. Additional parameters available with this event are:

• data: object, the data object sent via server's response.
• status: string, the jQuery AJAX success text status.
• xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
• selector: object, the jQuery selector for embed logic after submit in multi Modal.

$('#createCompany').on('kbModalSubmit', function(event, data, status, xhr, selector) {
    console.log('kbModalSubmit');
    // You may call pjax reloads here
});