antkaz/yii2-ajax

v2 2019-08-24 13:55 UTC

Requires

• yiisoft/yii2: ~2.0.0
• yiisoft/yii2-bootstrap4: ~2.0.0

MIT

• Anton Kazarinov

• bootstrap
• ajax
• modal
• yii2

README

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:

   <?= \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:

   <?= \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 $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:

   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:

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