Sự kiện trong dialog của Jquery UI

Hello Everybody !!! Mình là Doom. Bài viết này mình sẽ chia sẻ cho các bạn về một vài sự kiện của dialog Jquery UI. Một thư viện “huyền thoại” mà bất kể lập trình viên Web Font-end nào cũng biết.

Dialog là hộp thoại được hiện nổi bật trên trang web của chúng ta nhằm phục vụ một mục đích nhất định. Những mục đích ấy có thể là thông báo, cảnh báo cho người dùng hoặc có thể là một form nhập liệu, … Và nó cũng có nhiều sự kiện hay ho đó à nghe. Vậy đó là những sự kiện gì??? Hãy cùng mình tìm hiểu nhé. Let’s go !!!

1. Open nên “mở” không ta?

Sự kiện open của dialog cho chúng ta thực thi một hàm sau khi xuất hiện dialog. Sự kiện này giúp ta xử lý một số việc mà mình muốn sau khi dialog được hiện ra, có thể là việc tự động điền dữ liệu vào form nâng cao tiện ích cho người dùng.

Để gọi được sự kiện này, các bạn có thể tạo một file .js như sau:

$(document).ready(function () {
    $('#dialog').dialog({
        width: 300,
        modal: true,
        open: function () {
            alert("Dialog của bạn đã được mở!!!");
        }
    });
});

Trong đoạn code trên, ngay khi “vẽ” xong trang thằng jquery UI lấy element có id=”dialog” chèn vào trong một element có class=”ui-dialog” do nó tự sinh ra. Ngoài ra, bạn có thể tạo ra nó bằng cách gán sự kiện cho một element có trong trang của bạn. Thường thì mình sẽ gán vào cho một button.

$('.btn-dialog').click(function () {
        $('#dialog').dialog({
            width: 300,
            modal: true,
            open: function () {
                alert("Dialog của bạn đã được mở!!!");
            }
        });
        $('#dialog').dialog('open');
    });

Lưu ý: Việc tạo ra dialog ngay sau khi vẽ trang hoặc sau một sự kiện cũng là một vấn đề mà bạn cần chú ý nha. Vì nó cũng sẽ ảnh hưởng đến các sự kiện khác trong dialog đó.

OK giờ các bạn hãy xem trang web của mình sẽ làm gì khi mình gọi đến sự kiện open của thằng dialog nhé!

Như thế là cũng đủ để bạn hình dung ra sự kiện open nó ra sao rồi đúng không. Theo một quy luật tất yếu của tự nhiên có “mở” thì phải có “đóng” phải không các bạn ^_^!

2. Close liệu có phải “kết thúc”

Sự kiện close hay open về cách thức hoạt động cũng không khác nhau nhiều. Google dịch thì là “đóng” và “mở”. Nên các bạn cứ hiểu nôm na là thằng open sẽ thực hiện một việc sau khi dialog hiện ra. Còn thằng close cũng sẽ thực hiện công việc sau khi dialog bị ẩn đi.

$('.btn-dialog').click(function () {
        $('#dialog').dialog({
            width: 300,
            modal: true,
            close: function () {
                alert("Dialog của bạn đã bị đóng!!!");
            }
        });
    })

Điểm khác nhau giữa thằng close và open chỉ là việc ẩn hiện dialog mà thôi. Khi thằng close của jquery ui được thực hiện thì nó sẽ tự động thêm cho element có class=”ui-dialog” một style=”display: none” để ẩn dialog đó đi.

Khi muốn hiện lại thì ta gọi phương thức:

$('#dialog').dialog('open');

Lúc này, thằng jquery ui sẽ chuyển style=”display: block” để hiện dialog lên.
Phần này ngắn gọn, dễ hiểu quá nhỉ !!!

3. Destroy – ” hủy diệt” toàn bộ

Sự kiện cuối cùng mà mình muốn chia sẻ với các bạn là “destroy” của thằng dialog. Nó khác hoàn toàn hai thằng trước do nó chỉ thực hiện sự kiện destroy của jquery ui mà không thực hiện sự kiện do ta thiết lập. Điểm chung của cả ba sự kiện open, close và destroy là nó sẽ thực hiện sự kiện của thằng jquery ui trước sau đó mới tới sự kiện do ta thiết lập.

$('.btn-dialog').click(function () {
        $('#dialog').dialog({
            width: 300,
            modal: true,
            destroy: function () {
                alert("Dialog của bạn sắp bị đóng!!!");
            }
        });
    })

    $('.btn-close').click(function () {
        $('#dialog').dialog('destroy');
    })

Với đoạn code trên, việc thực hiện câu lệnh trong sự kiện destroy sẽ không được do sự kiện của thằng jquery ui sẽ thực hiện trước. Khi đó thì dialog đã bị “hủy” rồi nên sự kiện ta viết không còn ý nghĩa nữa.

Khi sự kiện destroy được thực hiện, jquery ui sẽ hủy element có class=”ui-dialog” mà nó tự sinh ra lúc trước và trả element của ta viết trong file html về vị trí của nó trong thẻ <tbody>.

Lúc này, dialog của ta sẽ mất đi, người dùng không nhìn thấy nó nữa. Vậy câu hỏi đặt ra là nó khác gì so với sự kiện close???

4. Sự khác biệt giữa close và destroy

Về mặt hình thức thì hai thằng này không có gì khác nhau do bọn nó cùng làm mất đi để người dùng không nhìn thấy dialog nữa. Nhưng bản chất là một thằng chỉ ẩn đi dialog và một thằng xóa luôn dialog do jquery ui sinh ra.

Trong phần sự kiện của open mình có đề cập đến việc khởi tạo ra 1 dialog ta có hai cách là tạo ngay sau khi tải trang xong hoặc tạo qua một sự kiện. Vấn đề này sẽ làm nổi bật sự khác nhau giữa close và destroy.

Nếu bạn tạo dialog sau khi tải trang xong thì việc bạn gọi lại phương thức open

$('#dialog').dialog('open');

Sau phương thức destroy sẽ gây ra lỗi. Do lúc này đối tượng dialog đã bị hủy. Muốn tạo lại dialog thì bạn lại phải tải lại trang.

Nếu bạn tạo dialog sau một sự kiện thì việc sử dụng close hay destroy sẽ là giống nhau. Vì mỗi lần có sự kiện đó thì dialog của bạn lại đươc tạo mới.

5. Tổng kết

Hy vọng sau bài viết này các bạn có thể thu nạp thêm được một vài kiến bổ ích về dialog
Nhớ like share để được đẹp trai và xinh gái hơn :).

Hẹn gặp lại các bạn ở những bài viết tiếp theo. Cảm ơn các bạn đã theo dõi! Xin chàoo !!