yii2-ajax ¶

1. Installation
2. Basic usage
3. Attributes
4. Events

This extension allows you to create forms in the Twitter Bootstrap modal window.

Documentation is at docs/README.md

Installation ¶

The preferred way to install this extension is through composer.

Run

php composer.phar require antkaz/yii2-ajax

or add

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

to the require section of your composer.json file.

Basic usage ¶

1. Аdd the modal widget to your view file:

   `php <?= \antkaz\ajax\Modal::widget([

    'id' => 'modal',
    'clientEvents' => [
        'submit.success.bs.modal' => 'function(event, body) {$(this).modal("hide")}'
    ]
   

   ]); ?> `

2. Add a link that will open the modal window:

   `php <?= \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. Add the data-ajax attribute in the ActiveForm options:

   `php <?php $form = \yii\bootstrap\ActiveForm::begin([

    'options' => [
        'data-ajax' => 1
    ],
   

   ]); ?>

   // your fields

   <?php \yii\bootstrap\ActiveForm::end() ?> `

4. Create an action in your controller that will handle this request:

   `php 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);
   

   } `

   Attributes ¶

Link attributes for loading the modal window:

• data-toggle - Toggle for enabled ajax-modal (required value ajax-modal);
• data-target - Bootstrap modal selector;
• data-title - Modal title;
• data-gridview - Yii2 GridView selector for group operations.

Events ¶

Added the following events, in addition to those that already exist

• submit.success.bs.modal - This event is triggered after the form has been successfully submitted. The second parameter is the content of the response:

  `js $('#myModal').on('submit.success.bs.modal', function (event, bodyResponse) {

  // do something...
  

  }) `