PHPackages                             police666/yii2-modal-ajax - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. police666/yii2-modal-ajax

ActiveYii2-extension

police666/yii2-modal-ajax
=========================

Modal-ajax for bootstrap 4

1.0(7y ago)0202MITJavaScript

Since Sep 4Pushed 7y ago1 watchersCompare

[ Source](https://github.com/Police666/yii2-modal-ajax)[ Packagist](https://packagist.org/packages/police666/yii2-modal-ajax)[ Docs](https://github.com/Police666/yii2-modal-ajax)[ RSS](/packages/police666-yii2-modal-ajax/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

Yii2-modal-ajax
===============

[](#yii2-modal-ajax)

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

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
$ php composer.phar require police666/yii2-modal-ajax:dev-master
```

or add

```
"police666/yii2-modal-ajax": "dev-master"

```

to the require section of your composer.json file.

Usage
-----

[](#usage)

### Controller

[](#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

[](#view)

```
use police\yii2\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'title' => '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
-------------

[](#usage-in-grid)

### Index View - Create (Single Modal Mode)

[](#index-view---create-single-modal-mode)

```
use police\yii2\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'title' => '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)

[](#index-view---update-multi-modal-mode)

Modal Ajax with events

```
use police\yii2\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');
                }
            }
        ")
    ]

]);

//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
-------------

[](#plugin-events)

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

### `kbModalBeforeShow` (ModalAjax::EVENT\_BEFORE\_SHOW)

[](#kbmodalbeforeshow-modalajaxevent_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)

[](#kbmodalshow-modalajaxevent_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` (ModalAjax::EVENT\_BEFORE\_SUBMIT)

[](#kbmodalbeforesubmit-modalajaxevent_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)

[](#kbmodalsubmit-modalajaxevent_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
});
```

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2808d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/697cad28dad98d99f7b2cde03194652857f499449e5ca470c8c15cf822f48a16?d=identicon)[Police](/maintainers/Police)

---

Top Contributors

[![Police666](https://avatars.githubusercontent.com/u/9952962?v=4)](https://github.com/Police666 "Police666 (7 commits)")

---

Tags

yii2extension

### Embed Badge

![Health badge](/badges/police666-yii2-modal-ajax/health.svg)

```
[![Health](https://phpackages.com/badges/police666-yii2-modal-ajax/health.svg)](https://phpackages.com/packages/police666-yii2-modal-ajax)
```

###  Alternatives

[skeeks/cms

SkeekS CMS — control panel and tools based on php framework Yii2

13825.6k47](/packages/skeeks-cms)[dmstr/yii2-cookie-consent

Yii2 Cookie Consent Widget

1452.6k](/packages/dmstr-yii2-cookie-consent)[richardfan1126/yii2-js-register

Yii2 widget to register JS into view

1357.2k7](/packages/richardfan1126-yii2-js-register)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)