antkaz/yii2-ajax

Installs: 2 230

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 3

Forks: 2

Open Issues: 0

Language:JavaScript

Type:yii2-extension

v2 2019-08-24 13:55 UTC

This package is auto-updated.

Last update: 2021-09-07 17:34:12 UTC


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