buihoangvu/yii2-modalajax

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside

yii2-modal-ajax

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside., _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

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

or add, _(*4)

"karnbrockgmbh/yii2-modal-ajax": "@dev"

to the require section of your composer.json file., _(*5)

Usage

Controller

Extend your basic logic with ajax render and save capabilities:, _(*6)

<?php
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, _(*7)

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

<?php
use karnbrockgmbh\modal\Modal;

Modal::begin([
    'id' => 'createCompany',
    '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
]);
Modal::end();

Plugin Events

On top if the basic twitter bootstrap modal events the following events are triggered, _(*8)

kbModalBeforeShow

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., _(*9)

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

kbModalShow

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., _(*10)

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

kbModalBeforeSubmit

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., _(*11)

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

kbModalSubmit

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., _(*12)

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