yii2 ajax submit button

AjaxSubmitButton untuk Yii 2

=======

Ini adalah widget AjaxSubmitButton yang kuat yang merender tombol ajax yang sangat mirip dengan ajaxSubmitButton dari Yii1 untuk Yii 2, namun memiliki banyak fungsi yang berguna.

Contoh Dasar

Contoh penggunaan widget dengan custom widget (dalam hal ini widget Select2).

Pemandangan:

 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>

Harap dicatat: #output adalah elemen div yang akan diperbarui.

Di pengontrol:

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

    $ code = $ _POST [ ' country_code ' ];

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

Contoh penggunaan dengan ActiveForm dan validasi klien

Pemandangan:

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

Seperti yang Anda lihat, cukup mudah menggunakan widget dengan ActiveForm - cukup dengan menyetel id ActiveForm ke variabel 'useWithActiveForm'. (Dalam hal ini id adalah 'tambahkan-form', tanpa simbol '#'!).

Validasi klien

Seperti yang saya katakan sebelumnya widget dapat digunakan dengan ActiveForm dan validasi klien diaktifkan. Jika Anda ingin menonaktifkannya, cukup setel 'enableClientValidation' ActiveForm ke false.

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

Penggunaan prapemuat

Anda dapat menggunakan widget dengan prapemuat khusus Anda sendiri.

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

Unggahan File

AjaxSubmitButton sepenuhnya mendukung pengunggahan file. Misalnya (lihat komentar):

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

Pilihan widget

Variabel	Keterangan	Jenis
ajaxOptions	opsi ajax	Himpunan
pilihan	Atribut HTML dan opsi lain dari tag penampung widget	Himpunan
nama tag	tag yang digunakan untuk merender tombol (secara default adalah 'tombol'. Anda dapat menentukan, misalnya, tag 'a')	Rangkaian
label	label tombol	Rangkaian
ikon	ikon tombol	String (misalnya 'fa fa-download')
ikonPosisi	posisi ikon tombol	konstanta (ICON_POSITION_LEFT atau ICON_POSITION_RIGHT)
encodeLabel	apakah label harus dikodekan HTML	Boolean
diklikButtonVarName	nama objek js. Itu tidak digunakan ketika useWithActiveForm diaktifkan	Rangkaian
gunakanDenganActiveForm	apakah tombol tersebut tidak boleh digunakan dengan ActiveForm. id ActiveForm untuk menggunakan tombol	Boolean / String

Instalasi

---

Cara yang lebih disukai untuk memasang ekstensi ini adalah melalui komposer.

Jalankan saja

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

atau tambahkan

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

ke bagian require pada file composer.json Anda dan jalankan composer update .