Page History

Adjust and put the following code in your Userview's settings (i.e. Custom Javascript / Sub Footer) for users to see an "are you sure?" dialog if they try to navigate away from a page that has unsaved changes. This has been tested with the v6 Userview Theme.

You might want to adjust to code to your needs. With the sample below you are able to exclude classes from triggering the dialog as well as field ids that are not regarded as a change (for example select boxes to show different AJAX subforms).

ปรับและวางรหัสต่อไปนี้ในการตั้งค่าของ Userview (เช่น Javascript / Sub Footer ที่กำหนดเอง) เพื่อให้ผู้ใช้เห็น "คุณแน่ใจหรือไม่?" โต้ตอบหากพวกเขาพยายามที่จะออกไปจากหน้าเว็บที่มีการเปลี่ยนแปลงที่ไม่ได้บันทึก สิ่งนี้ได้รับการทดสอบด้วยธีม v6 Userview

คุณอาจต้องการปรับให้เป็นรหัสตามความต้องการของคุณ ด้วยตัวอย่างด้านล่างคุณสามารถยกเว้นชั้นเรียนจากการเรียกโต้ตอบเช่นเดียวกับรหัสเขตข้อมูลที่ไม่ถือเป็นการเปลี่ยนแปลง (ตัวอย่างเช่นเลือกกล่องเพื่อแสดงฟอร์มย่อย AJAX ที่แตกต่างกัน)

<script> 
  
  var somethingChanged=false;
   $("form:not(#loginForm)").on("change", function(e){ //This function detects any changes except for on the login form
       if (!$(e.target).is('#id')) { //For all changes except for the field "id", the parameter that something changed is set. You may comment this out if not needed
         somethingChanged = true;
      }
   });
   
   $.fn.hasAnyClass = function() { //This function can deal with a number of classes entered below that will be excluded from the "are you sure you want to leave this page" notification
    for (var i = 0; i < arguments.length; i++) {
        if (this.hasClass(arguments[i])) {
            return true;
        }
    }
    return false;
   }
   
  window.onload = function() {
  window.addEventListener("beforeunload", function (e) {
        if (!$(document.activeElement).hasAnyClass('waves-button-input', 'form-button') //if the element that would trigger beforeunload has the mentioned classes, the dialog shown
            && !$(document.activeElement).parent().hasAnyClass('nav_item') //if the element has the mentioned parent class, the dialog won't be triggered (useful for Multi Page navigation that don't have a distinct own class)
            && somethingChanged) { //only if the form has changed the dialog will be triggered
                var confirmationMessage = 'It looks like you have been editing something. '
                                        + 'If you leave before saving, your changes will be lost.';
                (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
            }
        return undefined;
    });
 };
 
/*
 $(window).on('load', function() { //used for debugging
    console.log(somethingChanged);
})
*/
</script>