The code below call the "Click Save!" pop up if there were changes to input fields and someone attempts to navigate away from the page without clicking the submit button to save.
Can someone tell me how to make a small change to this that will call the "Click Save!" pop up for ANY attempt to navigate away from the page even if no changes were made to any of the input fields (but of course still no popup if they click the submit button)?
var warnMessage = "Click Save!";
$(document).ready(function() {
$('input:not(:button,:submit),textarea,select,text').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage; }});
$('input:submit').click(function(e) {
warnMessage = null;
});
});
var warnMessage = false;
window.onbeforeunload = function (event) {
if (!warnMessage) {
return;
}
else {
return "You have unsaved changes on this page. If you wish to save these changes, stay on the current page.";
}
}
$(document).ready(function () {
$('input:not(:button,:submit),textarea,select,text').change(function (event) {
warnMessage = true;
});
$('input:submit').click(function () {
warnMessage = false;
});
});
Related
I am trying to make it so that a "Submit" button is disabled when submitting and forwarding data from a form. This is to prevent the user from create multiple copies of the form when rapidly clicking the button when the initial data that was inputted is being saved.
One approach I tried was adding a debouncer to the JavaScript function that handles the submit button operations. However if the user continues to click the button after 5 seconds, the duplicate is still created.
I think a better approach would be to disable the button while the data is being submitted and give an indication to the user that the data is in the state of being saved, and after completion, reenable the button.
Here is the javascript code for context:
setupFormIO: function(submissionFunction) {
var $this = this;
var submitFunc = submissionFunction;
var labelText = "Submit";
if ($this.projectData && !this.readonly) {
labelText = "Save";
}
var submits = FormioUtils.searchComponents($this.template.components,
{
"type": "button"
}
);
if (submits) {
_.each(submits, function (component) {
component.label = labelText;
//
var timer;
if (timer) {
clearTimeout(timer);
}
//
if ($this.readonly) {
$("#" + component.id + " > button").on("click", function(evt) {
evt.stopPropagation();
location.assign("/project/ProjectHome.aspx");
timer = setTimeout(process, 5000); //
});
}
});
}
Adding the following bits of code at strategic locations of the script that handle operations during and after the submit button is clicked helped create the desired effect.
beforeSubmit: function (submission, next) {
const btns = document.querySelectorAll('.btn');
for (const btn of btns) {
btn.disabled = true;
}
$this.isSubmitting = true;
console.log("button disabled");
if (submits) {
_.each(submits, function (component) {
console.log("renabled");
for (const btn of btns) {
btn.disabled = false;
}
$this.isSubmitting = false;
console.log("button renabled");
});
}
However this was disabling and enabling every single button on the page. Ultimately the following jquery method was used because it specifically targets the submit buttons only.
if (submits) {
_.each(submits, function (component) {
$("#" + component.id + " > button").prop('disabled', true);
});
}
window.axios.post($this.baseUri + '/validate',
submission.data)
.then(function (d) {
next();
})
.catch(function (e) {
var message = "Validation Failed:";
$this.isSubmitting = false;
if (submits) {
_.each(submits, function (component) {
$("#" + component.id + " > button").prop('disabled', false);
});
Also wanted to note that after the submit button is clicked, the page reroutes to a summary page to prevent the submit button from being clicked again.
In popup page after enter the data before clicking the save button user try to close the popup in (X mark) i want to show the alert message(You did not save your changes). if user click the save button no need to show the alert message.
using javascript how can i do this ?
<script type="text/javascript">
$(document).ready(function () {
var unsaved = false;
$('#Button1').click(function () {
unsaved = true;
});
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.?";
}
}
window.onbeforeunload = unloadPage;
});
</script>
used below technique may be it is useful
var is_template_save;
if (is_need_save == '0') {
is_template_save = false;
} else {
is_template_save = true;
}
window.onbeforeunload = function () {
if (is_template_save) {
return "Did you save your template?"
}
}
function template_save() {
is_template_save = false;
}
function template_unsave() {
is_template_save = true;
}
Hope it make sense
I want the onbeforeunload pop-up to appear unless I click on the submit or the save button. Any ideas?
So far I have this:
Drupal.behaviors.PreventNavigation = function() {
window.onbeforeunload = function () {
return "Please save your work before navigating from this page";
}
}
here is my solution:
Drupal.behaviors.PreventNavigation = function() {
var clicked = false;
$('#edit-save').click(function() {
clicked = true;
});
$('#edit-submit-application').click(function() {
clicked = true;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!clicked) {
return "Please Save your work";
}
}
}
I have a gridview where I use page-indexing. If user navigates to next page I need to give an alert like "Make sure you updated the page before you move" and a pop up should display. If yes is clicked it should go to another page or if cancel is clicked it has to stay in the same page.
I am using this js, but the alert comes often if any button in the page is clicked. How can I display message only when paging is clicked.
<script type="text/javascript">
var isPaging;
$(".myPagingButton").on("click", function () {
isPaging = true;
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
if (!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Make sure you have updated the page before navigation?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload = goodbye;
</script>
If you only want it to appear for the paging buttons, than set a flag when the buttons are clicked.
HTML:
<a class="myPagingButon" href="example.html">Paging</a>
JavaScript:
var isPaging;
$(function(){
$(".myPagingButon").on("click", function() { console.log("click");
isPaging = true;
});
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
return 'Dialog text here.';
}
window.onbeforeunload = goodbye;
JSFiddle
document.getElementById('yourButton').addEventListener('click', function(){
window.addEventListener('beforeunload', function(){
goodbye();
});
});
I have window.onbeforeunload triggering properly. It's displaying a confirmation box to ensure the user knows they are navigating (closing) the window and that any unsaved work will be erased.
I have a unique situation where I don't want this to trigger if a user navigates away from the page by clicking a link, but I can't figure out how to detect if a link has been clicked inside the function to halt the function. This is what I have for code:
window.onbeforeunload = function() {
var message = 'You are leaving the page.';
/* If this is Firefox */
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
if(confirm(message)) {
history.go();
}
else {
window.setTimeout(function() {
window.stop();
}, 1);
}
}
/* Everything else */
else {
return message;
}
}
You're looking for deferred event handling. I'll explain using jQuery, as it is less code:
window._link_was_clicked = false;
window.onbeforeunload = function(event) {
if (window._link_was_clicked) {
return; // abort beforeunload
}
// your event handling
};
jQuery(document).on('click', 'a', function(event) {
window._link_was_clicked = true;
});
a (very) poor man's implementation without jQuery's convenient delegation handling could look like:
document.addEventListener("click", function(event) {
if (this.nodeName.toLowerCase() === 'a') {
window._link_was_clicked = true;
}
}, true);
this allows all links on your page to leave without invoking the beforeunload handler. I'm sure you can figure out how to customize this, should you only want to allow this for a specific set of links (your question wasn't particularly clear on that).
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}
You can differ between a link unload or a reload/user entering a different address unload s by using a timer. This way you know the beforeunload was triggered directly after the link click.
Example using jQuery:
$('a').on('click', function(){
window.last_clicked_time = new Date().getTime();
window.last_clicked = $(this);
});
$(window).bind('beforeunload', function() {
var time_now = new Date().getTime();
var link_clicked = window.last_clicked != undefined;
var within_click_offset = (time_now - window.last_clicked_time) < 100;
if (link_clicked && within_click_offset) {
return 'You clicked a link to '+window.last_clicked[0].href+'!';
} else {
return 'You are leaving or reloading the page!';
}
});
(tested in Chrome)