Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demogorgorn/yii2-ajax-submit-button
Old good ajax submit button from Yii 1 for Yii 2
https://github.com/demogorgorn/yii2-ajax-submit-button
ajax ajax-button ajax-form widget yii2 yii2-widgets
Last synced: 2 months ago
JSON representation
Old good ajax submit button from Yii 1 for Yii 2
- Host: GitHub
- URL: https://github.com/demogorgorn/yii2-ajax-submit-button
- Owner: demogorgorn
- Created: 2014-06-13T19:49:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-04-29T00:49:02.000Z (almost 3 years ago)
- Last Synced: 2024-11-25T00:15:42.666Z (2 months ago)
- Topics: ajax, ajax-button, ajax-form, widget, yii2, yii2-widgets
- Language: PHP
- Size: 20.5 KB
- Stars: 25
- Watchers: 5
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AjaxSubmitButton for Yii 2
=====================================
[](https://packagist.org/packages/demogorgorn/yii2-ajax-submit-button)
[](https://packagist.org/packages/demogorgorn/yii2-ajax-submit-button)
[](https://packagist.org/packages/demogorgorn/yii2-ajax-submit-button)
[](https://packagist.org/packages/demogorgorn/yii2-ajax-submit-button)
[](http://www.yiiframework.com/)
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:
```php
use demogorgorn\ajax\AjaxSubmitButton;
'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']
]);
?>
'Check',
'ajaxOptions' => [
'type'=>'POST',
'url'=>'country/getinfo',
'success' => new \yii\web\JsExpression('function(html){
$("#output").html(html);
}'),
],
'options' => ['class' => 'customclass', 'type' => 'submit'],
]);
AjaxSubmitButton::end();
?>
```
> Please note: that #output is a div element which will be updated.
In controller:
```php
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:
```php
$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.
```php
$form = ActiveForm::begin([
'id' => 'filters-form',
'enableClientValidation' => false
]);
```
### Preloader use
It's possible to use the widget with your own custom preloader.
```php
'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
'Сохранить',
'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
Variable | Description | Type
------------ | ------------- | -------------
ajaxOptions | ajax options | Array
options | HTML attributes and other options of the widget's container tag | Array
tagName | the tag to use to render the button (by default is 'button'. You can specify, for example, 'a' tag) | String
label | button's label | String
icon | button's icon | String (e.g. 'fa fa-download')
iconPosition | button icon position | const (ICON_POSITION_LEFT or ICON_POSITION_RIGHT)
encodeLabel | whether the label should be HTML-encoded | Boolean
clickedButtonVarName | js object name. It is unused when useWithActiveForm is enabled | String
useWithActiveForm | whether the button should not be used with ActiveForm. the id of ActiveForm to use the button with | Boolean / String
## Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
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`.