PHPackages                             igorvolnyi/yii2-modal-ajax-multi - 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. igorvolnyi/yii2-modal-ajax-multi

ActiveYii2-extension

igorvolnyi/yii2-modal-ajax-multi
================================

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside supporting multiple stacked or nested modal forms

0.0.1(8y ago)0401MITJavaScriptPHP >=5.4.0

Since Mar 10Pushed 8y ago1 watchersCompare

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

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

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

[](#yii2-modal-ajax-multi)

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside supporting mutiple stacked modal windows, i.e. when you open one modal window containing a form to create associated data and that form also contains a button to open another modal window, it will work too.

This work is based on [loveorigami/yii2-modal-ajax](https://github.com/loveorigami/yii2-modal-ajax). Initially I wanted to fork but later understood that the widget requires major rework to suite my needs. It solves lack of multiple stacked modal windows problem in the original Yii2 extension.

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

[](#installation)

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

Either run

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

or add

```
"igorvolnyi/yii2-modal-ajax-multi": "*"

```

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 igorvolnyi\widgets\ModalAjaxMulti;

echo ModalAjaxMulti::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
-------------

[](#usage-in-grid)

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

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

```
use igorvolnyi\widgets\ModalAjaxMulti;

echo ModalAjaxMulti::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

    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax',

]);
```

### Index View - Update (Multi Modal Mode)

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

Grid example with data-scenario

```
Hello
Goodbye
```

Modal Ajax with events

```
use igorvolnyi\widgets\ModalAjaxMulti;

echo ModalAjax::widget([
    'id' => 'updateCompany',
    'selector' => 'a.btn' // all buttons in grid view with href attribute
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default

    'options' => ['class' => 'header-primary'],
    'pjaxContainer' => '#grid-company-pjax',
    'events'=>[
        ModalAjaxMulti::EVENT_MODAL_SHOW => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                selector.addClass('warning');
            }
       "),
        ModalAjaxMulti::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');
                }
            }
        ")
    ]

]);
```

Plugin Events
-------------

[](#plugin-events)

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

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

[](#kbmodalbeforeshow-modalajaxmultievent_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` (ModalAjaxMulti::EVENT\_MODAL\_SHOW)

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

[](#kbmodalbeforesubmit-modalajaxmultievent_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` (ModalAjaxMulti::EVENT\_MODAL\_SUBMIT)

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

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 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

2985d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f1a5eb4387e15da64e0d841ff66ce08011c24d8584550bdf100a836c45e28910?d=identicon)[igorvolnyi](/maintainers/igorvolnyi)

---

Top Contributors

[![igorvolnyi](https://avatars.githubusercontent.com/u/11294353?v=4)](https://github.com/igorvolnyi "igorvolnyi (1 commits)")

---

Tags

nestedyii2bootstrapmodalmultipleajax-modalstacked

### Embed Badge

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

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

###  Alternatives

[skeeks/cms

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

13825.6k47](/packages/skeeks-cms)[loveorigami/yii2-modal-ajax

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

50167.8k2](/packages/loveorigami-yii2-modal-ajax)

PHPackages © 2026

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