yii2 ajax submit button

AjaxSubmitButton для Yii 2

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

Это мощный виджет AjaxSubmitButton, который отображает кнопку ajax, которая очень похожа на ajaxSubmitButton из Yii1 для Yii 2, но имеет множество полезных функций.

Базовый пример

Пример использования виджета с пользовательским виджетом (в данном случае виджетом Select2).

Вид:

 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>

Обратите внимание: #output — это элемент div, который будет обновлен.

В контроллере:

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

    $ code = $ _POST [ ' country_code ' ];

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

Пример использования с ActiveForm и проверкой клиента

Вид:

    $ 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 ()

Как видите, использовать виджет с ActiveForm довольно просто — достаточно установить идентификатор ActiveForm в переменную «useWithActiveForm». (В данном случае идентификатором является «add-form», без символа «#»!).

Проверка клиента

Как я уже говорил, виджет можно использовать с ActiveForm и включенной проверкой клиента. Если вы хотите отключить его, просто установите для параметра «enableClientValidation» ActiveForm значение false.

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

Использование прелоадера

Виджет можно использовать со своим собственным предзагрузчиком.

 <?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 ();
?>

Загрузка файлов

AjaxSubmitButton полностью поддерживает загрузку файлов. Например (смотрите комментарии):

 <?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 (); ?>

Возможности виджета

Переменная	Описание	Тип
ajaxOptions	параметры ajax	Множество
параметры	Атрибуты HTML и другие параметры тега контейнера виджета.	Множество
имя тега	тег, который будет использоваться для отображения кнопки (по умолчанию — «button». Вы можете указать, например, тег «a»)	Нить
этикетка	метка кнопки	Нить
икона	значок кнопки	Строка (например, «fa fa-download»)
значокПозиция	положение значка кнопки	константа (ICON_POSITION_LEFT или ICON_POSITION_RIGHT)
кодироватьметку	должна ли метка быть закодирована в HTML	логическое значение
clickedButtonVarName	имя объекта js. Он не используется, когда включен useWithActiveForm.	Нить
использоватьсактивеформ	следует ли использовать кнопку с ActiveForm. идентификатор ActiveForm для использования кнопки	Логическое значение/строка

Установка

---

Предпочтительный способ установки этого расширения — через композитор.

Либо запустить

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

или добавьте

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

в раздел require вашего файла composer.json и запустите composer update .