antkaz/yii2-ajax

yii2-ajax

This extension allows you to create forms in the Twitter Bootstrap modal window., _(*1)

Documentation is at docs/README.md, _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Run, _(*4)

php composer.phar require antkaz/yii2-ajax

or add, _(*5)

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

to the require section of your composer.json file., _(*6)

Basic usage

1. Аdd the modal widget to your view file:, _(*7)

   <?= \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:, _(*8)

   <?= \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:, _(*9)

    [
           'data-ajax' => 1
       ],
   ]); ?>
   
   // your fields
   
   
   

4. Create an action in your controller that will handle this request:, _(*10)

   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:, _(*11)

• 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, _(*12)

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

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