demogorgorn / yii2-ajax-submit-button
AjaxSubmitButton renders an ajax button which is very similar to ajaxSubmitButton from Yii1.
Installs: 109 410
Dependents: 1
Suggesters: 0
Security: 0
Stars: 25
Watchers: 5
Forks: 17
Open Issues: 3
Type:yii2-extension
Requires
- yiisoft/yii2: *
This package is auto-updated.
Last update: 2024-10-27 02:00:55 UTC
README
=====================================
This is the powerful AjaxSubmitButton widget that renders an ajax button which is very similar to ajaxSubmitButton from Yii1 for Yii 2, but has many useful functions.
Basic Example
Example of usage of the widget with a custom widget (in this case Select2 widget).
The view:
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>
Please note: that #output is a div element which will be updated.
In controller:
public function actionGetinfo() { if(!isset($_POST['country_code']) || empty($_POST['country_code'])) return; $code = $_POST['country_code']; return $this->renderAjax('resultwidget', ['code' => $code]); }
Example of usage with ActiveForm and client validation
The view:
$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()
As you can see it's quite easy to use the widget with ActiveForm - enough to set the ActiveForm's id to the 'useWithActiveForm' variable. (In this case id is 'add-form', without '#' symbol!).
Client validation
As I said before the widget can be used with ActiveForm and client validation enabled. If you wish to disable it, just set ActiveForm's 'enableClientValidation' to false.
$form = ActiveForm::begin([ 'id' => 'filters-form', 'enableClientValidation' => false ]);
Preloader use
It's possible to use the widget with your own custom preloader.
<?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(); ?>
File Uploads
AjaxSubmitButton fully supports file uploads. For example (look at the comments):
<?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(); ?>
Widget's options
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require demogorgorn/yii2-ajax-submit-button "*"
or add
"demogorgorn/yii2-ajax-submit-button": "*"
to the require section of your composer.json
file and run composer update
.