yii2 ใช้ Javacsript ดักจับ

 จากนั้นทำการ Register JavaSctipt เพื่อดักจับการคลิกปุ่มต่างๆ อธิบายเพิ่มเติมนิดหนึ่งครับ ส่วนการแสดง GridView นั้นเป็นการแสดงลักษณะตารางครับ ซึ่งแต่ละ tr จะมี data-key ระบุอยู่ โดยจะเป็นค่าจาก PrimaryKey เช่น <tr data-key="1"> เป็นต้น

จะเห็นว่าการ view และการ update จะมีการส่งค่า id เข้าไปประมวลผลด้วยครับ ส่งเข้า actionView($id) และ actionUpdate($id) ให้ได้ตามปกติ

ส่วนหน้าตาของ JavaScript มีดังนี้

1. ดักจับการคลิกจากปุ่มเพิ่มข้อมูล id="activity-create-link"
2. ดักจับการคลิกจากปุ่ม View (รูปตา)
3. ดักจับการคลิกจากปุ่ม Update (รูปดินสอ)

<?php $this->registerJs('
        function init_click_handlers(){
            $("#activity-create-link").click(function(e) {
                    $.get(
                        "create",
                        function (data)
                        {
                            $("#activity-modal").find(".modal-body").html(data);
                            $(".modal-body").html(data);
                            $(".modal-title").html("เพิ่มข้อมูลสมาชิก");
                            $("#activity-modal").modal("show");
                        }
                    );
                });
            $(".activity-view-link").click(function(e) {
                    var fID = $(this).closest("tr").data("key");
                    $.get(
                        "view",
                        {
                            id: fID
                        },
                        function (data)
                        {
                            $("#activity-modal").find(".modal-body").html(data);
                            $(".modal-body").html(data);
                            $(".modal-title").html("เปิดดูข้อมูลสมาชิก");
                            $("#activity-modal").modal("show");
                        }
                    );
                });
            $(".activity-update-link").click(function(e) {
                    var fID = $(this).closest("tr").data("key");
                    $.get(
                        "update",
                        {
                            id: fID
                        },
                        function (data)
                        {
                            $("#activity-modal").find(".modal-body").html(data);
                            $(".modal-body").html(data);
                            $(".modal-title").html("แก้ไขข้อมูลสมาชิก");
                            $("#activity-modal").modal("show");
                        }
                    );
                });
            
        }
        init_click_handlers(); //first run
        $("#customer_pjax_id").on("pjax:success", function() {
          init_click_handlers(); //reactivate links in grid after pjax update
        });');?>

หมายเหตุ บริเวณสีเขียวสำหรับท่านที่เปิดใช้งาน UrlManager แบบ Pretty Url