README

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

这是一个强大的 AjaxSubmitButton 组件，它渲染了一个类似于 Yii1 中的 ajaxSubmitButton 的 Ajax 按钮用于 Yii 2，但具有许多有用的功能。

基本示例

使用自定义组件（本例中为 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(); ?>

组件选项

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

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

或者将以下内容添加到你的 composer.json 文件的 require 部分，并运行 composer update：

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

to the require section of your composer.json file and run composer update.