yii2 ajax submit button

AjaxSubmitButton pour Yii 2

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

Il s'agit du puissant widget AjaxSubmitButton qui affiche un bouton ajax très similaire à ajaxSubmitButton de Yii1 pour Yii 2, mais qui possède de nombreuses fonctions utiles.

Exemple de base

Exemple d'utilisation du widget avec un widget personnalisé (dans ce cas le widget Select2).

La vue :

 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>

Attention : ce #output est un élément div qui sera mis à jour.

Dans le contrôleur :

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

    $ code = $ _POST [ ' country_code ' ];

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

Exemple d'utilisation avec ActiveForm et validation client

La vue :

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

Comme vous pouvez le voir, il est assez facile d'utiliser le widget avec ActiveForm - suffisamment pour définir l'identifiant d'ActiveForm sur la variable 'useWithActiveForm'. (Dans ce cas, l'identifiant est « add-form », sans le symbole « # » !).

Validation client

Comme je l'ai déjà dit, le widget peut être utilisé avec ActiveForm et la validation client activée. Si vous souhaitez le désactiver, définissez simplement « enableClientValidation » d'ActiveForm sur false.

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

Utilisation du préchargeur

Il est possible d'utiliser le widget avec votre propre préchargeur personnalisé.

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

Téléchargements de fichiers

AjaxSubmitButton prend entièrement en charge les téléchargements de fichiers. Par exemple (regardez les commentaires) :

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

Options du widget

Variable	Description	Taper
ajaxOptions	options ajax	Tableau
choix	Attributs HTML et autres options de la balise conteneur du widget	Tableau
Nom de la balise	la balise à utiliser pour afficher le bouton (par défaut, c'est 'bouton'. Vous pouvez spécifier, par exemple, la balise 'a')	Chaîne
étiquette	étiquette du bouton	Chaîne
icône	icône du bouton	Chaîne (par exemple 'fa fa-download')
icônePosition	position de l'icône du bouton	const (ICON_POSITION_LEFT ou ICON_POSITION_RIGHT)
encodeLabel	si l'étiquette doit être codée en HTML	Booléen
clickedButtonVarName	js nom de l'objet. Il n'est pas utilisé lorsque useWithActiveForm est activé	Chaîne
utiliserAvecActiveForm	si le bouton ne doit pas être utilisé avec ActiveForm. l'identifiant d'ActiveForm pour utiliser le bouton avec	Booléen/Chaîne

Installation

---

La méthode préférée pour installer cette extension est via composer.

Soit courir

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

ou ajouter

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

à la section require de votre fichier composer.json et exécutez composer update .