yii2 ajax submit button

Yii 2 の AjaxSubmitButton

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

これは、Yii 2 用の Yii1 の ajaxSubmitButton に非常によく似た ajax ボタンをレンダリングする強力な AjaxSubmitButton ウィジェットですが、多くの便利な機能を備えています。

基本的な例

カスタム ウィジェット (この場合は 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 の ID を「useWithActiveForm」変数に設定するだけで十分です。 (この場合、ID は「#」記号なしの「add-form」です。)

クライアントの検証

前に述べたように、ウィジェットは ActiveForm とクライアント検証を有効にした状態で使用できます。これを無効にしたい場合は、ActiveForm の「enableClientValidation」を 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 (); ?>

ウィジェットのオプション

変数	説明	タイプ
ajaxオプション	ajax オプション	配列
オプション	ウィジェットのコンテナタグのHTML属性とその他のオプション	配列
タグ名	ボタンのレンダリングに使用するタグ (デフォルトでは「button」です。たとえば、「a」タグを指定できます)	弦
ラベル	ボタンのラベル	弦
アイコン	ボタンのアイコン	文字列 (例: 「fa fa-download」)
アイコンの位置	ボタンアイコンの位置	const (ICON_POSITION_LEFT または ICON_POSITION_RIGHT)
エンコードラベル	ラベルをHTMLエンコードするかどうか	ブール値
クリックされたボタン変数名	jsオブジェクト名。 useWithActiveFormが有効な場合は使用されません	弦
アクティブフォームで使用	ボタンを ActiveForm で使用すべきかどうか。ボタンを使用する ActiveForm の ID	ブール値 / 文字列

インストール

---

この拡張機能をインストールするには、composer を使用することをお勧めします。

どちらを実行しても

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

または追加します

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

をcomposer.jsonファイルのrequireセクションに追加し、 composer updateを実行します。