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 .

Để làm điều này, chúng ta sẽ cần phải ghi đè lại phần xử lý sự kiện của jquery-ujs và xử lý các sự kiện của chúng ta. bạn tạo ra một file js mới để làm nhé, tiện cho việc config về sau. paste đoạn này vào đã nhé

//Ghi đè hộp thoại xác định mặc định của rails
$.rails.allowAction = function(link){
  if (link.data("confirm") == undefined){
    return true;
  }
  $.rails.showConfirmationDialog(link);
  return false;
}
//Event khi người dùng click confirm link
$.rails.confirmed = function(link){
  link.data("confirm", null);
  link.trigger("click.rails");
}
//Hiển thị hộp thoại xác nhận
$.rails.showConfirmationDialog = function(link){
  var message = link.data("confirm");
  $.fn.SimpleModal({
    model: "modal",
    title: "Please confirm",
    contents: message
  }).addButton("Confirm", "button alert", function(){
    $.rails.confirmed(link);  
    this.hideModal();
  }).addButton("Cancel", "button secondary").showModal();
}

Tìm hiểu nó chút nhé!

Trước tiên, chúng ta sẽ ghi đè phương thức allowAction bằng phương pháp riêng của chúng ta. Đây là phương thức được gọi bởi jquery-ujs khi người dùng nhấp vào một liên kết với các thuộc tính dữ liệu. Nếu liên kết không chứa thuộc tính "data-confirm", nó sẽ chỉ trả lại và cho phép người dùng thực hiện hành động như bình thường. Nếu không, nó sẽ hiển thị hộp thoại xác nhận.

//Ghi đè hộp thoại xác định mặc định của rails
$.rails.allowAction = function(link){
  if (link.data("confirm") == undefined){
    return true;
  }
  $.rails.showConfirmationDialog(link);
  return false;
}

Tiếp sau chúng ta xem việc xử lý sự kiện click button confirm nhé

//Event khi người dùng click confirm link
$.rails.confirmed = function(link){
  link.data("confirm", null);
  link.trigger("click.rails");
}

đoạn này đơn giản chỉ là việc set data-confirm = null để tránh việc click tiếp theo lại gọi lại nó thôi cuối cùng đến với việc xử lý xụ kiện trong cái confirm dialog của chúng ta.

//Hiển thị hộp thoại xác nhận
$.rails.showConfirmationDialog = function(link){
  var message = link.data("confirm");
  $.fn.SimpleModal({
    model: "modal",
    title: "Please confirm",
    contents: message
  }).addButton("Confirm", "button alert", function(){
    $.rails.confirmed(link);  
    this.hideModal();
  }).addButton("Cancel", "button secondary").showModal();
}

trong đoạn trên mình dùng thư viện https://simplemodal.plasm.it/#download cho cái modal nhé! tất nhiên và bạn có thể tùy chọn cái modal mà bạn thích rồi thay thế nó vào là ok.