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 。