https://github.com/loveorigami/yii2-modal-ajax
A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside.
https://github.com/loveorigami/yii2-modal-ajax
ajax-modal yii2-bootstrap-modal yii2-widgets
Last synced: about 1 month ago
JSON representation
A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside.
- Host: GitHub
- URL: https://github.com/loveorigami/yii2-modal-ajax
- Owner: loveorigami
- License: mit
- Created: 2016-08-19T07:19:40.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-24T14:22:18.000Z (almost 5 years ago)
- Last Synced: 2025-05-07T17:49:51.048Z (about 1 month ago)
- Topics: ajax-modal, yii2-bootstrap-modal, yii2-widgets
- Language: JavaScript
- Size: 39.1 KB
- Stars: 50
- Watchers: 8
- Forks: 30
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Yii2-modal-ajax
[](https://packagist.org/packages/loveorigami/yii2-modal-ajax)
[](https://packagist.org/packages/loveorigami/yii2-modal-ajax)
[](https://packagist.org/packages/loveorigami/yii2-modal-ajax)
A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside.
## Installation
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```sh
$ 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:
```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
```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 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)
```php
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
```php
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
// Hello
// Goodbye
......................
],
]);
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.
```js
$('#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.
```js
$('#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.
```js
$('#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.
```js
$('#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.
```js
$('#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.
```js
$('#createCompany').on('kbModalSubmitComplete', function(event, xhr, textStatus) {
console.log('kbModalSubmitComplete');
});
```