README

这是一个围绕 Yii2 Bootstrap Modal 的包装器，用于在内部通过 AJAX 使用 ActiveForm。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

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

或者将以下内容添加到你的 composer.json 文件的 require 部分中：

"karnbrockgmbh/yii2-modal-ajax": "@dev"

使用方法

控制器

扩展你的基本逻辑，添加 AJAX 渲染和保存功能

<?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,
    ]);
}

到

<?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,
        ]);
    }
}

视图

<?php
use karnbrockgmbh\modal\Modal;

Modal::begin([
    'id' => 'createCompany',
    '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
]);
Modal::end();

插件事件

除了基本的 Twitter Bootstrap 模态事件之外，以下事件也会被触发

kbModalBeforeShow

在表单视图加载之前，此事件被触发。此事件可用的附加参数包括

• xhr: XMLHttpRequest，此事务使用的 jQuery XML Http Request 对象。
• settings: object，此事务的 jQuery AJAX 设置。

$('#createCompany').on('kbModalBeforeShow', function(event, xhr, settings) {
    console.log('kbModalBeforeShow');
});

kbModalShow

在表单视图成功加载之后，此事件被触发。此事件可用的附加参数包括

• data: object，通过服务器响应发送的数据对象。
• status: string，jQuery AJAX 成功文本状态。
• xhr: XMLHttpRequest，此事务使用的 jQuery XML Http Request 对象。

$('#createCompany').on('kbModalShow', function(event, data, status, xhr) {
    console.log('kbModalShow');
});

kbModalBeforeSubmit

在表单提交之前，此事件被触发。此事件可用的附加参数包括

• xhr: XMLHttpRequest，此事务使用的 jQuery XML Http Request 对象。
• settings: object，此事务的 jQuery AJAX 设置。

$('#createCompany').on('kbModalBeforeSubmit', function(event, xhr, settings) {
    console.log('kbModalBeforeSubmit');
});

kbModalSubmit

在表单成功提交之后，此事件被触发。此事件可用的附加参数包括

• data: object，通过服务器响应发送的数据对象。
• status: string，jQuery AJAX 成功文本状态。
• xhr: XMLHttpRequest，此事务使用的 jQuery XML Http Request 对象。

$('#createCompany').on('kbModalSubmit', function(event, data, status, xhr) {
    console.log('kbModalSubmit');
    // You may call pjax reloads here
});