demogorgorn/yii2-ajax-submit-button

AjaxSubmitButton renders an ajax button which is very similar to ajaxSubmitButton from Yii1.

# AjaxSubmitButton for Yii 2

, _(*1)

This is the powerful AjaxSubmitButton widget that renders an ajax button which is very similar to ajaxSubmitButton from Yii1 for Yii 2, but has many useful functions., _(*2)

Basic Example

Example of usage of the widget with a custom widget (in this case Select2 widget)., _(*3)

The view:, _(*4)

use demogorgorn\ajax\AjaxSubmitButton;

'uk-width-medium-1-1 uk-form uk-form-horizontal']); ?>

= Select2::widget([
    'name' => 'country_code',
    'data' => Country::getAllCountries(),
    'options' => [
        'id' => 'country_select',
        'multiple' => false, 
        'placeholder' => 'Choose...',
        'class' => 'uk-width-medium-7-10']
     ]);
?>

 'Check',
    'ajaxOptions' => [
        'type'=>'POST',
        'url'=>'country/getinfo',
        'success' => new \yii\web\JsExpression('function(html){
            $("#output").html(html);
            }'),
    ],
    'options' => ['class' => 'customclass', 'type' => 'submit'],
    ]);
    AjaxSubmitButton::end();
?>

Please note: that #output is a div element which will be updated., _(*5)

In controller:, _(*6)

public function actionGetinfo()
{
    if(!isset($_POST['country_code']) || empty($_POST['country_code']))
        return;

    $code = $_POST['country_code'];

    return $this->renderAjax('resultwidget', ['code' => $code]);
}

Example of usage with ActiveForm and client validation

The view:, _(*7)

    $form = ActiveForm::begin([
               'id' => 'add-form',
               'options' => ['class' => 'form-inline'],
            ]);

    ...

    AjaxSubmitButton::begin([
        'label' => 'Add',
        'useWithActiveForm' => 'add-form',
        'ajaxOptions' => [
            'type' => 'POST',
            'success' => new \yii\web\JsExpression("function(data) {
                if (data.status == true) 
                {
                    closeTopbar();
                }                                            
            }"),
        ],
        'options' => ['class' => 'btn btn-primary', 'type' => 'submit', 'id' =>'add-button'],
    ]);
    AjaxSubmitButton::end();

    ActiveForm::end()

As you can see it's quite easy to use the widget with ActiveForm - enough to set the ActiveForm's id to the 'useWithActiveForm' variable. (In this case id is 'add-form', without '#' symbol!)., _(*8)

Client validation

As I said before the widget can be used with ActiveForm and client validation enabled. If you wish to disable it, just set ActiveForm's 'enableClientValidation' to false., _(*9)

    $form = ActiveForm::begin([
                'id' => 'filters-form',
                'enableClientValidation' => false
            ]);

Preloader use

It's possible to use the widget with your own custom preloader., _(*10)

<?php AjaxSubmitButton::begin([
    'label' => 'Check',
    'ajaxOptions' => [
        'type'=>'POST',
        'url'=>'country/getinfo',
        'beforeSend' => new \yii\web\JsExpression('function(html){
            ... show preloader...
            }'),
        'success' => new \yii\web\JsExpression('function(html){
            ... hide preloader ...
            }'),
    ],
    'options' => ['class' => 'customclass', 'type' => 'submit'],
    ]);
    AjaxSubmitButton::end();
?>

File Uploads

AjaxSubmitButton fully supports file uploads. For example (look at the comments):, _(*11)

<?php AjaxSubmitButton::begin([
            'label' => 'Сохранить',
            'useWithActiveForm' => 'add-form',
            'ajaxOptions' => [
                'type' => 'POST',
                'processData' => false, // Don't process the files
                'contentType' => false, // Set content type to false as jQuery will tell the server its a query string request
                'data' => new \yii\web\JsExpression("new FormData($('#add-form')[0])"), // Do not stringify the form
                'success' => new \yii\web\JsExpression("function(data) {
                if (data.status == true) 
                {
                    // process result
                }                                            
            }"),
            ],
            'options' => ['class' => 'btn btn-primary', 'type' => 'submit', 'id' =>'add-button'],
        ]);
        AjaxSubmitButton::end(); ?>

Widget's options

## Installation

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

Either run, _(*13)

php composer.phar require demogorgorn/yii2-ajax-submit-button "*"

or add, _(*14)

"demogorgorn/yii2-ajax-submit-button": "*"

to the require section of your composer.json file and run composer update., _(*15)