yii2 ajax submit button

AjaxSubmitButton para Yii 2

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

Este é o poderoso widget AjaxSubmitButton que renderiza um botão ajax que é muito semelhante ao ajaxSubmitButton do Yii1 para Yii 2, mas tem muitas funções úteis.

Exemplo Básico

Exemplo de utilização do widget com um widget customizado (neste caso, widget Select2).

A vista:

 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>

Observe: que #output é um elemento div que será atualizado.

No controlador:

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

    $ code = $ _POST [ ' country_code ' ];

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

Exemplo de uso com ActiveForm e validação de cliente

A visão:

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

Como você pode ver, é muito fácil usar o widget com o ActiveForm - basta definir o id do ActiveForm para a variável 'useWithActiveForm'. (Neste caso, o id é 'add-form', sem o símbolo '#'!).

Validação do cliente

Como eu disse antes, o widget pode ser usado com ActiveForm e validação de cliente habilitadas. Se desejar desativá-lo, basta definir 'enableClientValidation' do ActiveForm como falso.

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

Uso do pré-carregador

É possível usar o widget com seu próprio pré-carregador personalizado.

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

Uploads de arquivos

AjaxSubmitButton oferece suporte total ao upload de arquivos. Por exemplo (veja os comentários):

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

Opções do widget

Variável	Descrição	Tipo
ajaxOptions	opções de ajax	Variedade
opções	Atributos HTML e outras opções da tag container do widget	Variedade
tagNome	a tag a ser usada para renderizar o botão (por padrão é 'button'. Você pode especificar, por exemplo, a tag 'a')	Corda
rótulo	rótulo do botão	Corda
ícone	ícone do botão	String (por exemplo, 'fa fa-download')
posição do ícone	posição do ícone do botão	const (ICON_POSITION_LEFT ou ICON_POSITION_RIGHT)
codificarLabel	se o rótulo deve ser codificado em HTML	Booleano
clickedButtonVarName	nome do objeto js. Não é usado quando useWithActiveForm está habilitado	Corda
useWithActiveForm	se o botão não deve ser usado com o ActiveForm. o id do ActiveForm para usar o botão com	Booleano / String

Instalação

---

A forma preferida de instalar esta extensão é através do compositor.

Ou corra

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

ou adicione

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

para a seção require do seu arquivo composer.json e execute composer update .