Introduction

This article demonstrates a way to display a pop-up to remind the user to refresh the page (if it contains a form) after a fixed interval, to avoid hitting a 403 forbidden page due to CSRF token expiration upon submission.


How To

Including SweetAlert2 JavaScript in UI Sub Header or Sub Footer

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


Adding Code in UI Custom JavaScript

var sessionTimeoutId = null;
$(document).on('page_loaded', function(){
    clearTimeout(sessionTimeoutId);
    if($('form').length > 0){
        sessionTimeoutId = setTimeout(function(){
            Swal.fire({
                title: '',
                html: 'The page has expired due to inactivity.<br>Please refresh and try again.',
                icon: 'warning',
                allowOutsideClick: false, 
                allowEscapeKey: false,  
                showConfirmButton: true,
                showCancelButton: true,
                confirmButtonText: 'Refresh',
                cancelButtonText: 'Cancel',
                confirmButtonColor: 'var(--theme-button-bg)',
            }).then((result) => {
                if (result.isConfirmed) {
                    $("#content.page_content").addClass('ajaxloading');
                    $("#content.page_content").attr('data-content-placeholder', 'form');
                    location.reload();
                }
            });
        }, 1800000);
    }
})

Tweak the timeout value of 180000 (eg. 30 minutes = 30 x 60 x 1000 milliseconds) accordingly to your session timeout. For more options and configurations please refer to https://sweetalert2.github.io/.

  • No labels