Skip to content
A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src oops forgot to add event to args Jun 9, 2019
LICENSE init repo Aug 19, 2016
README.md Adding support for event complete on ajax calls Feb 8, 2019
composer.json up Jun 10, 2019

README.md

Yii2-modal-ajax

Latest Stable Version Total Downloads License

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

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

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

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 lo\widgets\modal\ModalAjax;

echo ModalAjax::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 lo\widgets\modal\ModalAjax;

echo ModalAjax::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
    'size' => ModalAjax::SIZE_LARGE,
    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax',

]);

Index View - Update (Multi Modal Mode)

Modal Ajax with events

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'updateCompany',
    'selector' => 'a.btn', // all buttons in grid view with href attribute

    'options' => ['class' => 'header-primary'],
    'pjaxContainer' => '#grid-company-pjax',
    'events'=>[
        ModalAjax::EVENT_MODAL_SHOW => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                selector.addClass('warning');
            }
       "),
        ModalAjax::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');
                }
            }
        "),
        ModalAjax::EVENT_MODAL_SHOW_COMPLETE => new \yii\web\JsExpression("
            function(event, xhr, textStatus) {
                if (xhr.status == 403) {
                    $(this).modal('toggle');
                    alert('You do not have permission to execute this action');
                }
            }
        "),
        ModalAjax::EVENT_MODAL_SUBMIT_COMPLETE => new \yii\web\JsExpression("
            function(event, xhr, textStatus) {
                if (xhr.status == 403) {
                    $(this).modal('toggle');
                    alert('You do not have permission to execute this action');
                }
            }
        ")
    ]
]);

//Grid example with data-scenario

Pjax::begin([
    'id' => 'grid-company-pjax',
    'timeout' => 5000,
]); 

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
	      ......................
		// Action buttons  
		// <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>
          ......................
    ],
]); 

Pjax::end();

Plugin Events

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

kbModalBeforeShow (ModalAjax::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 (ModalAjax::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');
});

kbModalShowComplete (ModalAjax::EVENT_MODAL_SHOW_COMPLETE)

This event is triggered when ajax call is completed when the form is loaded. Additional parameters available with this event are:

  • xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
  • textStatus: string, the jQuery AJAX success text status for this transaction.
$('#createCompany').on('kbModalShowComplete', function(event, xhr, textStatus) {
    console.log('kbModalShowComplete');
});

kbModalBeforeSubmit (ModalAjax::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 (ModalAjax::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
});

kbModalSubmitComplete (ModalAjax::EVENT_MODAL_SUBMIT_COMPLETE)

This event is triggered when ajax call is completed when the form is submitted. Additional parameters available with this event are:

  • xhr: XMLHttpRequest, the jQuery XML Http Request object used for this transaction.
  • textStatus: string, the jQuery AJAX success text status for this transaction.
$('#createCompany').on('kbModalSubmitComplete', function(event, xhr, textStatus) {
    console.log('kbModalSubmitComplete');
});
You can’t perform that action at this time.