yii2 ajax submit button

AjaxSubmitButton لـ Yii 2

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

هذه هي أداة AjaxSubmitButton القوية التي تعرض زر ajax الذي يشبه إلى حد كبير ajaxSubmitButton من Yii1 لـ 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 على المتغير "useWithActiveForm". (في هذه الحالة، المعرف هو "نموذج الإضافة"، بدون الرمز "#"!).

التحقق من صحة العميل

كما قلت من قبل، يمكن استخدام الأداة مع تمكين ActiveForm والتحقق من صحة العميل. إذا كنت ترغب في تعطيله، فما عليك سوى تعيين 'enableClientValidation' الخاص بـ ActiveForm إلى 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 (); ?>

خيارات القطعة

عامل	وصف	يكتب
ajaxOptions	خيارات اياكس	صفيف
خيارات	سمات HTML والخيارات الأخرى لعلامة حاوية الأداة	صفيف
اسم العلامة	العلامة التي سيتم استخدامها لعرض الزر (افتراضيًا هي "button". يمكنك تحديد، على سبيل المثال، علامة "a")	خيط
ملصق	تسمية الزر	خيط
رمز	أيقونة الزر	سلسلة (على سبيل المثال "fa fa-download")
iconPosition	موقف رمز الزر	الثابت (ICON_POSITION_LEFT أو ICON_POSITION_RIGHT)
encodeLabel	ما إذا كان ينبغي أن تكون التسمية مشفرة بتنسيق HTML	منطقية
تم النقر فوق ButtonVarName	اسم كائن JS. ولا يتم استخدامه عند تمكين useWithActiveForm	خيط
useWithActiveForm	ما إذا كان لا ينبغي استخدام الزر مع ActiveForm. معرف ActiveForm لاستخدام الزر معه	منطقية / سلسلة

تثبيت

---

الطريقة المفضلة لتثبيت هذا الامتداد هي من خلال الملحن.

إما تشغيل

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

أو إضافة

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

إلى القسم المطلوب في ملف composer.json الخاص بك وقم بتشغيل composer update .