yii2 ajax submit button

Yii 2 的 AjaxSubmitButton

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

這是強大的 AjaxSubmitButton 小部件，它呈現一個 ajax 按鈕，它與 Yii1 for Yii 2 中的 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選項	阿賈克斯選項	大批
選項	小部件容器標記的 HTML 屬性和其他選項	大批
標籤名	用於呈現按鈕的標籤（預設為“button”。您可以指定，例如“a”標籤）	細繩
標籤	按鈕的標籤	細繩
圖示	按鈕的圖標	字串（例如“fa fa-download”）
圖示位置	按鈕圖示位置	const（ICON_POSITION_LEFT 或 ICON_POSITION_RIGHT）
編碼標籤	標籤是否應該是 HTML 編碼的	布林值
clickedButton變數名稱	js 物件名稱。啟用 useWithActiveForm 時不使用	細繩
使用ActiveForm	該按鈕是否不應與 ActiveForm 一起使用。與按鈕一起使用的 ActiveForm 的 id	布林/字串

安裝

---

安裝此擴充功能的首選方法是透過 Composer。

要么運行

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

或添加

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

到composer.json檔案的require部分並執行composer update 。