| Table of Contents |
|---|
Introduction
This article demonstrates a way to display a Popup 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
| Code Block | ||
|---|---|---|
| ||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
...
Adding Code in UI Custom JavaScript
| Code Block | ||
|---|---|---|
| ||
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/.