yii2 ajax submit button
versions < 7.x
====================================
Dies ist das leistungsstarke AjaxSubmitButton-Widget, das eine Ajax-Schaltfläche rendert, die dem ajaxSubmitButton von Yii1 für Yii 2 sehr ähnlich ist, aber über viele nützliche Funktionen verfügt.
Beispiel für die Verwendung des Widgets mit einem benutzerdefinierten Widget (in diesem Fall Select2-Widget).
Die Aussicht:
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>Bitte beachten Sie: dass #output ein div-Element ist, das aktualisiert wird.
Im Controller:
public function actionGetinfo ()
{
if (! isset ( $ _POST [ ' country_code ' ]) || empty ( $ _POST [ ' country_code ' ]))
return ;
$ code = $ _POST [ ' country_code ' ];
return $ this -> renderAjax ( ' resultwidget ' , [ ' code ' => $ code ]);
}Die Aussicht:
$ 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 ()Wie Sie sehen, ist es ganz einfach, das Widget mit ActiveForm zu verwenden – es reicht aus, die ActiveForm-ID auf die Variable „useWithActiveForm“ zu setzen. (In diesem Fall lautet die ID „add-form“, ohne das Symbol „#“!).
Wie ich bereits sagte, kann das Widget mit aktivierter ActiveForm und aktivierter Client-Validierung verwendet werden. Wenn Sie es deaktivieren möchten, setzen Sie einfach „enableClientValidation“ von ActiveForm auf „false“.
$ form = ActiveForm:: begin ([
' id ' => ' filters-form ' ,
' enableClientValidation ' => false
]);Es ist möglich, das Widget mit Ihrem eigenen benutzerdefinierten Preloader zu verwenden.
<?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 unterstützt Datei-Uploads vollständig. Zum Beispiel (siehe Kommentare):
<?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 (); ?>| Variable | Beschreibung | Typ |
|---|---|---|
| ajaxOptions | Ajax-Optionen | Array |
| Optionen | HTML-Attribute und andere Optionen des Container-Tags des Widgets | Array |
| tagName | das Tag, das zum Rendern der Schaltfläche verwendet werden soll (standardmäßig ist es „button“. Sie können beispielsweise das Tag „a“ angeben) | Zeichenfolge |
| Etikett | Beschriftung der Schaltfläche | Zeichenfolge |
| Symbol | Symbol der Schaltfläche | String (z. B. „fa fa-download“) |
| iconPosition | Position des Schaltflächensymbols | const (ICON_POSITION_LEFT oder ICON_POSITION_RIGHT) |
| encodeLabel | ob das Etikett HTML-kodiert sein soll | Boolescher Wert |
| clickedButtonVarName | js-Objektname. Es wird nicht verwendet, wenn useWithActiveForm aktiviert ist | Zeichenfolge |
| useWithActiveForm | ob die Schaltfläche nicht mit ActiveForm verwendet werden soll. die ID von ActiveForm, mit der die Schaltfläche verwendet werden soll | Boolescher Wert / String |
Die bevorzugte Methode zur Installation dieser Erweiterung ist Composer.
Entweder laufen
php composer.phar require demogorgorn/yii2-ajax-submit-button "*"
oder hinzufügen
"demogorgorn/yii2-ajax-submit-button": "*"
Gehen Sie zum Abschnitt „require“ Ihrer Datei composer.json und führen Sie composer update aus.
