yii2 ajax submit button

Botón Enviar Ajax para Yii 2

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

Este es el poderoso widget AjaxSubmitButton que representa un botón ajax que es muy similar al ajaxSubmitButton de Yii1 para Yii 2, pero tiene muchas funciones útiles.

Ejemplo básico

Ejemplo de uso del widget con un widget personalizado (en este caso el widget Select2).

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

Tenga en cuenta: ese #output es un elemento div que se actualizará.

En controlador:

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

    $ code = $ _POST [ ' country_code ' ];

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

Ejemplo de uso con ActiveForm y validación de cliente

La vista:

    $ 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 puede ver, es bastante fácil usar el widget con ActiveForm; basta con configurar la identificación de ActiveForm en la variable 'useWithActiveForm'. (¡En este caso, la identificación es 'add-form', sin el símbolo '#'!).

Validación del cliente

Como dije antes, el widget se puede usar con ActiveForm y la validación del cliente habilitada. Si desea deshabilitarlo, simplemente configure 'enableClientValidation' de ActiveForm en falso.

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

Uso del precargador

Es posible utilizar el widget con su propio precargador 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 ();
?>

Cargas de archivos

AjaxSubmitButton admite totalmente la carga de archivos. Por ejemplo (mira los comentarios):

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

Opciones del widget

Variable	Descripción	Tipo
Opciones ajax	opciones ajax	Formación
opciones	Atributos HTML y otras opciones de la etiqueta contenedora del widget	Formación
nombre de etiqueta	la etiqueta que se utilizará para representar el botón (por defecto es 'botón'. Puede especificar, por ejemplo, una etiqueta 'a')	Cadena
etiqueta	etiqueta del botón	Cadena
icono	icono del botón	Cadena (por ejemplo, 'fa fa-download')
iconoPosición	posición del icono del botón	constante (ICON_POSITION_LEFT o ICON_POSITION_RIGHT)
codificarEtiqueta	si la etiqueta debe estar codificada en HTML	booleano
nombreVarBotónClic	nombre del objeto js. No se utiliza cuando useWithActiveForm está habilitado	Cadena
utilizar con formulario activo	si el botón no debe usarse con ActiveForm. la identificación de ActiveForm para usar el botón con	Booleano/cadena

Instalación

---

La forma preferida de instalar esta extensión es a través de Composer.

Ya sea correr

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

o agregar

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

a la sección require de su archivo composer.json y ejecute composer update .