README

此扩展允许您在Twitter Bootstrap模态窗口中创建表单。

文档在docs/README.md

安装

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

运行

php composer.phar require antkaz/yii2-ajax

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

"antkaz/yii2-ajax": "~1.2"

require

基本用法

1. 将模态小部件添加到您的视图文件

   <?= \antkaz\ajax\Modal::widget([
       'id' => 'modal',
       'clientEvents' => [
           'submit.success.bs.modal' => 'function(event, body) {$(this).modal("hide")}'
       ]
   ]); ?>

2. 添加一个打开模态窗口的链接

   <?= \yii\bootstrap\Html::a('Create', ['create'], [
       'class' => 'btn btn-success',
       'data-toggle' => 'ajax-modal', // outputs the result to the modal window
       'data-target' => '#modal', // ID modal
       'data-title' => 'Create item' // custom modal title
   ]); ?>

3. 在ActiveForm选项中添加data-ajax属性

   <?php $form = \yii\bootstrap\ActiveForm::begin([
       'options' => [
           'data-ajax' => 1
       ],
   ]); ?>
   
   // your fields
   
   <?php \yii\bootstrap\ActiveForm::end() ?>

4. 在控制器中创建一个处理此请求的操作

   public function actionCreate()
   {
       $model = new Model();
   
       if ($model->load(Yii::$app->request->post()) && $model->save()) {
           return $this->redirect(['index']); // optional
       }
   
       return $this->renderView('create', [
           'model' => $model,
       ]);
   
   }
   
   protected function renderView($view, $params = [])
   {
       if (Yii::$app->request->isAjax) {
           return $this->renderAjax($view, $params);
       }
       return $this->render($view, $params);
   }

属性

加载模态窗口的链接属性

• data-toggle - 启用ajax-modal的切换（必需值ajax-modal）；
• data-target - Bootstrap模态选择器；
• data-title - 模态标题；
• data-gridview - 用于分组操作的Yii2 GridView选择器。

事件

除了已经存在的那些之外，还添加了以下事件：链接

• submit.success.bs.modal - 表单成功提交后触发此事件。第二个参数是响应内容

  $('#myModal').on('submit.success.bs.modal', function (event, bodyResponse) {
    // do something...
  })