antkaz/yii2-ajax

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...
    

    }) `

1 0
2 followers
1 177 downloads
Yii Version: 2.0
License: MIT
Category: User Interface
Developed by: Anton Kazarinov
Created on: Apr 6, 2018
Last updated: a year ago
Packagist Profile
Github Repository

Related Extensions