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";
}
}
}
Related
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 would like to disable the submit button once the form has been submitted. That means the submit button should not be clickable after the user click submit. That means I want the submit button to remain disable even after refresh
; (function ($) {
$.fn.tpFormDialogCustom = function (method) {
var self = this;
var dialogButtons = [
{
text: "Submit and Email",
id: "tpFormDialog_btnSubmit",
click: submitandmailTpFormDialog
},
function submitandmailTpFormDialog() {
if(CheckValidate()) {
commonDialogs.showError(ExampleMessages.JournalError);
} else {
commonDialogs.showConfirm(ExampleMessages.ConfirmEmail, function() {
try {
commonDialogs.showProgress(ExampleMessages.SubmitAndEmail);
var o = getOptions();
var form = $(o.form);
form.ajaxSubmit({
success: handleEmailResponse,
beforeSerialize: function($form, options) {
if(!$("#SubmitBtn", $form).length) {
$('select.required', $form).prop('disabled', false);
$form.append("<input id='SubmitBtn' type='hidden' name='From' value='Submit' />");
}
}
});
} catch(e) {
commonDialogs.showError();
}
});
}
}
function handleEmailResponse(data) {
$('#tpFormDialog_btnSubmit').prop("disabled", true);
commonDialogs.hideProgress();
var o = getOptions();
if (data.IsSuccess) {
commonDialogs.showAck(ExampleMessages.ConfirmSendEmail);
closeTpFormDialog();
o.table.refresh();
} else {
var errors = data.ResponseModel;
if (typeof (errors) === 'string') {
commonDialogs.showError(errors);
} else {
helpForValidation.showErrors(errors);
}
}
};
You can disable your submit button by adding disable property to submit button.
$('input:submit').click(function(){
console.log("Form is submiting.....");
$('input:submit').attr("disabled", true);
});
Demo : https://jsfiddle.net/Prakash_Thete/6qqgszs4/
You should do it on ajax success so in case of error the user can re submit the form.
In your case it would be inside the handleEmailResponse function.
function handleMailResponse(){
$('#btnSubmitId').prop("disabled", true);
/* the rest of your code */
}
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;
});
});
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)
I have a snippet of jQuery
$(function () {
$('.checked').click(function (e) {
e.preventDefault();
var dirtyvalue = "Test1";
var textvalue= "Test";
if (dirtyvalue.toLowerCase() != textvalue.toLowerCase()) {
{
var dialog = $('<p>Do you want to save your changes?</p>').dialog({
buttons: {
"Yes": function () {
dialog.dialog('close');
alert('yes btn called');
},
"No": function () {
dialog.dialog('close');
alert('No btn called');
},
"Cancel": function () {
dialog.dialog('close');
}
}
});
}
return false;
}
return true;
});
});
I want to return true or false on button click; 'Yes' should return true, 'No' should return true, and 'Cancel' should return false.
I already checked this link, but this is not solving my problem.
See also my previous question.
My scenario is that I have many ActionLink and TreeView links which navigate to their respective pages. Suppose I am on page 1 where I have this JS, and on that page I have many action links. Clicking on page 2, at that time my confirm should open, and when I click on the button 'No' it should redirect to page 2.
A dialog can't return a value, you must put what you want to do in another function. for example
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function()
{
alert('you chose yes');
//call a function that redirects you
function_redirect(true);
},
"No": function()
{
alert('you chose no');
//call a function that redirects you
function_redirect(true);
},
"Cancel": function()
{
alert('you chose cancel');
//just close the dialog
dialog.dialog('close');
}
}
});
var function_redirect = function(redirect){
if(redirect === true){
//redirect to page2
}
}
you should put the logic you need to implement in "function_redirect" (or in whatever function you want) and pass parametrs according to the button pressed
EDIT - if you need to know what button has been clicked, just use the event object that is passed to the function
"Yes": function(e) {
//e.target is the element of the dom that has been clicked
//from e.target you can understand where you are and act accordingly
//or pass it to function_redirect
function_redirect(true, e.target);
var function_redirect = function(redirect, target){
if(redirect === true){
if($(target).parent().attr('id') === 'page2'){
//redirect to page2
}else{
//do something else
}
}
}
Dialog works async. So you cant return any value. You should use callback function.
$("a").click(dialog.dialog("open"),function(data){
//do your redirect here
})