Làm cách nào để phát hiện dữ liệu chưa lưu trong biểu mẫu khi người dùng rời khỏi trang?

Question

Tôi cần phát hiện dữ liệu chưa được lưu trong biểu mẫu khi người dùng rời khỏi trang mà không gửi biểu mẫu. Tôi muốn thực hiện điều đó mà không cần thêm một người nghe thay đổi giá trị cho mỗi đầu vào.

Đây là yêu cầu chức năng:

"Thành viên mở một trang hơn nhấp vào bất kỳ liên kết nếu giá trị trong trang thay đổi một thông điệp cảnh báo popup để thông báo cho người dùng rằng ông cần phải lưu dữ liệu thay đổi, nhưng nếu đã làm không thay đổi bất kỳ hệ thống nào tiếp tục mà không thông báo cho người dùng ".

Tôi đã thử so sánh phương pháp mảng để so sánh cả DTO sắp tới cho DB và liên kết DTO, nhưng nó mang lại cho tôi nhiều vấn đề về độ dài mảng và so sánh byte.

Answer 1

Điều này thường được thực hiện ở phía máy khách với sự trợ giúp của JavaScript, vì không thể chặn được sự kiện beforeunload từ phía máy chủ khi người dùng cuối rời khỏi trang.

Dưới đây là một ví dụ cụ thể với sự giúp đỡ của các thư viện JavaScript jQuery (nếu không bạn sẽ kết thúc với 10 lần càng nhiều mã để làm cho nó đúng cách tương thích crossbrowser và làm việc liên tục cùng với ajax tái render):

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    $(function() { 
     // Set the unload message whenever any input element get changed. 
     $(':input').on('change', function() { 
      setConfirmUnload(true); 
     }); 

     // Turn off the unload message whenever a form get submitted properly. 
     $('form').on('submit', function() { 
      setConfirmUnload(false); 
     }); 
    }); 

    function setConfirmUnload(on) { 
     var message = "You have unsaved data. Are you sure to leave the page?"; 
     window.onbeforeunload = (on) ? function() { return message; } : null; 
    } 
</script> 

Chỉ cần dán mẫu này vào mẫu <h:head> của bạn hoặc chỉ cần đặt nó trong một số tệp script.js mà bạn bao gồm bởi <h:outputScript>.

Answer 2

Điều này phù hợp với tôi.

$(function() { 
      // Set the unload message whenever any input element get changed. 
      $('input').change(function() { 
       setConfirmUnload(true); 
      }); 

      // Turn off the unload message whenever a form get submitted properly. 
      $('form').submit(function() { 
       setConfirmUnload(false); 
      }); 
     }); 

     function setConfirmUnload(on) { 
      var message = "You have unsaved data. Are you sure to leave the page?"; 
      window.onbeforeunload = (on) ? function() { return message; } : null; 
     }