yii2 ajax submit button

Yii 2용 AjaxSubmitButton

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

이것은 Yii 2용 Yii1의 ajaxSubmitButton과 매우 유사하지만 유용한 기능이 많이 있는 ajax 버튼을 렌더링하는 강력한 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 (); ?>

위젯의 옵션

변하기 쉬운	설명	유형
아약스옵션	아약스 옵션	정렬
옵션	위젯 컨테이너 태그의 HTML 속성 및 기타 옵션	정렬
태그이름	버튼을 렌더링하는 데 사용할 태그(기본적으로 '버튼'입니다. 예를 들어 'a' 태그를 지정할 수 있습니다)	끈
상표	버튼의 라벨	끈
상	버튼의 아이콘	문자열(예: 'fa fa-download')
아이콘위치	버튼 아이콘 위치	const (ICON_POSITION_LEFT 또는 ICON_POSITION_RIGHT)
인코딩라벨	라벨을 HTML로 인코딩해야 하는지 여부	부울
clickedButtonVarName	js 객체 이름. useWithActiveForm이 활성화되면 사용되지 않습니다.	끈
useWithActiveForm	버튼을 ActiveForm과 함께 사용하면 안 되는지 여부. 버튼을 사용할 ActiveForm의 ID	부울/문자열

설치

---

이 확장 기능을 설치하는 가장 좋은 방법은 작곡가를 이용하는 것입니다.

실행하거나

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

또는 추가

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

composer.json 파일의 require 섹션으로 이동하여 composer update 실행하세요.