Skip to content

demogorgorn/yii2-ajax-submit-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

AjaxSubmitButton for Yii 2

=====================================

Latest Stable Version Total Downloads License Monthly Downloads Yii2

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.

Basic Example

Example of usage of the widget with a custom widget (in this case Select2 widget).

The view:

use demogorgorn\ajax\AjaxSubmitButton;

<?php echo Html::beginForm('', 'post', ['class'=>'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']
     ]);
?>
       
<?php AjaxSubmitButton::begin([
    'label' => 'Check',
    'ajaxOptions' => [
        'type'=>'POST',
        'url'=>'country/getinfo',
        'success' => new \yii\web\JsExpression('function(html){
            $("#output").html(html);
            }'),
    ],
    'options' => ['class' => 'customclass', 'type' => 'submit'],
    ]);
    AjaxSubmitButton::end();
?>
            
<?php echo Html::endForm(); ?>

<div id="output"></div>

Please note: that #output is a div element which will be updated.

In controller:

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:

    $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!).

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.

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

Preloader use

It's possible to use the widget with your own custom preloader.

<?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):

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

Variable Description Type
ajaxOptions ajax options Array
options HTML attributes and other options of the widget's container tag Array
tagName the tag to use to render the button (by default is 'button'. You can specify, for example, 'a' tag) String
label button's label String
icon button's icon String (e.g. 'fa fa-download')
iconPosition button icon position const (ICON_POSITION_LEFT or ICON_POSITION_RIGHT)
encodeLabel whether the label should be HTML-encoded Boolean
clickedButtonVarName js object name. It is unused when useWithActiveForm is enabled String
useWithActiveForm whether the button should not be used with ActiveForm. the id of ActiveForm to use the button with Boolean / String

Installation


The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file and run composer update.