PHPackages                             swilson1337/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. [Templating & Views](/categories/templating)
4. /
5. swilson1337/yii2-modal-ajax

ActiveYii2-extension[Templating & Views](/categories/templating)

swilson1337/yii2-modal-ajax
===========================

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

4.3.5(8y ago)01.6k1MITJavaScript

Since Aug 19Pushed 8y ago1 watchersCompare

[ Source](https://github.com/swilson1337/yii2-modal-ajax)[ Packagist](https://packagist.org/packages/swilson1337/yii2-modal-ajax)[ Docs](https://github.com/swilson1337/yii2-modal-ajax)[ RSS](/packages/swilson1337-yii2-modal-ajax/feed)WikiDiscussions master Synced 5d ago

READMEChangelog (10)DependenciesVersions (18)Used By (0)

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

[](#yii2-modal-ajax)

[![Latest Stable Version](https://camo.githubusercontent.com/4b905579183ffb5997097aa0197402ffafe031b40e446c9d638a273f02fb1a17/68747470733a2f2f706f7365722e707567782e6f72672f6c6f76656f726967616d692f796969322d6d6f64616c2d616a61782f762f737461626c65)](https://packagist.org/packages/loveorigami/yii2-modal-ajax)[![Total Downloads](https://camo.githubusercontent.com/16ca92cd53411f2d4373d09cd7ee63d4809ae3433a0ce459d265a8519b7d57be/68747470733a2f2f706f7365722e707567782e6f72672f6c6f76656f726967616d692f796969322d6d6f64616c2d616a61782f646f776e6c6f616473)](https://packagist.org/packages/loveorigami/yii2-modal-ajax)[![License](https://camo.githubusercontent.com/1d8250929f14e49ecaf4729d2ab0635656ff43f82bfb1e02e4fafecbd7199bd3/68747470733a2f2f706f7365722e707567782e6f72672f6c6f76656f726967616d692f796969322d6d6f64616c2d616a61782f6c6963656e7365)](https://packagist.org/packages/loveorigami/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 --prefer-dist loveorigami/yii2-modal-ajax "@dev"
```

or add

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

```

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

[](#usage-in-grid)

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

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

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

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'=>[
        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');
                }
            }
        ")
    ]

]);
```

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

33

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 57.1% 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

Every ~41 days

Recently: every ~97 days

Total

17

Last Release

2942d ago

Major Versions

1.0 → 2.02016-11-07

2.1 → 4.02017-04-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/9230f9c418ed7fd87db91aee7309bee4e005d64405ceaecb009c4201ca415348?d=identicon)[swilson1337](/maintainers/swilson1337)

---

Top Contributors

[![swilson1337](https://avatars.githubusercontent.com/u/4252021?v=4)](https://github.com/swilson1337 "swilson1337 (20 commits)")[![loveorigami](https://avatars.githubusercontent.com/u/98164?v=4)](https://github.com/loveorigami "loveorigami (15 commits)")

---

Tags

yii2bootstrapmodalajax-modal

### Embed Badge

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

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

###  Alternatives

[loveorigami/yii2-modal-ajax

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

50174.3k2](/packages/loveorigami-yii2-modal-ajax)[raoul2000/yii2-bootswatch-asset

Use Bootswatch theme in your Yii application with minimum effort

2045.3k4](/packages/raoul2000-yii2-bootswatch-asset)[luyadev/luya-bootstrap4

Bootstrap4 Assets and Helper classes like ActiveForm for LUYA and Yii2.

1945.0k3](/packages/luyadev-luya-bootstrap4)[nkovacs/yii2-datetimepicker

Bootstrap datetimepicker widget for Yii 2, based on Eonasdan/bootstrap-datetimepicker.

1064.1k](/packages/nkovacs-yii2-datetimepicker)

PHPackages © 2026

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