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 - เพียงพอที่จะตั้งค่า ID ของ ActiveForm เป็นตัวแปร 'useWithActiveForm' (ในกรณีนี้ id คือ 'add-form' โดยไม่มีสัญลักษณ์ '#'!)

การตรวจสอบลูกค้า

อย่างที่ฉันบอกไปก่อนหน้านี้ว่าวิดเจ็ตสามารถใช้กับ ActiveForm และเปิดใช้งานการตรวจสอบความถูกต้องของไคลเอ็นต์ได้ หากคุณต้องการปิดการใช้งาน เพียงตั้งค่า 'enableClientValidation' ของ ActiveForm เป็นเท็จ

    $ 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')	สตริง
ฉลาก	ป้ายกำกับของปุ่ม	สตริง
ไอคอน	ไอคอนของปุ่ม	สตริง (เช่น 'ดาวน์โหลดฟ้าฟ้า')
ไอคอนตำแหน่ง	ตำแหน่งไอคอนปุ่ม	const (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": "*"

ไปที่ส่วน need ของไฟล์ composer.json ของคุณและเรียกใช้ composer update