Tùy chỉnh hộp thoại cho data-confirm trong rails

Khi làm việc với Rails có thể bạn đã quen thuộc với hộp thoại xác nhận dữ liệu cho một liên kết. Nó được sử dụng để yêu cầu xác nhận người dùng trước khi thực hiện hành động thay mặt cho người dùng và cũng dùng để tránh việc xảy ra những request do sơ ý người dùng như vô tình click vào delete.

<%= link_to "Delete", post_path(post), method: :delete, confirm: "Mày đã chắc chắn chưa?" %>

Đoạn code trên sẽ được render ra nội dung html như sau:

<a href="/posts/1" data-method="delete" data-confirm="Mày đã chắc chắn chưa?">Delete</a>

Khi người dùng click vào link thì họ sẽ thấy một hộp thoại hiện ra để hỏi xem họ có chắc chắn với yêu cầu đó không. Tính năng của nó là hay thế đó nhưng nếu mà dùng nó theo mặc định thì phải nói là rất xấu, nhất là với trang web của bạn có một giao diện đẹp lung thị linh mà nó lại có cái confirm trơ khấc thế khia thì có phải là mất thẩm mỹ cả một cái giao diện không! vậy câu hỏi đặt ra ở đây là làm thế nào để custome được cái confirm dialog đó?

Cũng khá đơn giản. Bạn có thể vào trong file application.js để ngía qua nó một tý. bạn có thấy dòng này không?

//= require jquery_ujs

Bạn nghĩ nó là gì? đúng rồi đó lúc đầu mình cũng nghĩ chả khác gì bạn đâu! mình nghĩ đó là một thư viện của "đại ca" jQuery nhà chúng mình nhưng thật rathif không phải vậy đâu. nó đây này https://github.com/rails/jquery-ujs nhờ cái này mà cho phép rails xử lý những thuộc tính data- như data-method và data-confirm, mà 2 ví dụ kia thì bạn gặp quá nhiều rồi phải không? Cụ thể hơn, nó sẽ xử lý sự kiện nhấp chuột trên bất kỳ liên kết nào có các thuộc tính này và ngăn chặn tác vụ mặc định nếu cần. Bạn có thể xem tệp này nếu bạn quan tâm đến sự hiểu biết logic đằng sau nó https://github.com/rails/jquery-ujs/blob/master/src/rails.js. Cái mà mình không thích là cái giao diện của confirm nó hiện ra là cái confirm mặc định của trình duyệt