loveorigami / yii2-modal-ajax
A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside
Installs: 138 767
Dependents: 2
Suggesters: 0
Security: 0
Stars: 50
Watchers: 9
Forks: 29
Open Issues: 6
Language:JavaScript
Type:yii2-extension
README
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'); });