Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}
Related
I have this function:
$(document).ready(function() {
$('#time-options').on('change', function() {
if ($('#time-options').prop('checked')) {
$('#time-options-div').slideDown(500);
return false;
} else {
$('#time-options-div').slideUp(500);
return false;
}
});
});
So whenever the #time-options is checked, the div slides down. But sometimes the #time-options is already selected when the page loads, so in this case I would like the #time-options-div to be already open.
How can I achieve this?
Try to invoke the change event manually once, after the event got bound.
$('#time-options').on('change', function(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}).change();
The simplest way is to also run the block inside the on change function. With some refactoring you can also have:
$(document).ready(function(){
function slide(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}
$('#time-options').on('change',slide);
slide();
});
I'm using the checkdirty function for checking my ckeditor for any changes before exiting. It's working ok but the alert comes up even when I submit the changes. What code would I change and where to get this submit button to skip the check and just save the changes?
Here's my code.
for ( var name in CKEDITOR.instances ) {
if(submit_it)
return false;
if ( CKEDITOR.instances[ name ].checkDirty() ) {
return evt.returnValue = "You will lose the changes made in the editor.";
}
}
}
var submit_it = false;
if ( window.addEventListener )
window.addEventListener( "beforeunload", beforeUnload, false );
else
window.attachEvent( "onbeforeunload", beforeUnload );
Here's my javascript code in the head.
var warn_on_leave = false;
CKEDITOR.on('currentInstance', function() {
try {
CKEDITOR.currentInstance.on('key', function() {
warn_on_leave = true;
});
} catch (err) { }
});
$(document.activeElement).submit(function() {
warn_on_leave = false;
});
$(window).bind('beforeunload', function() {
if(warn_on_leave) {
return 'Attention: Your text has not been saved!';
}
});
Here's my submit button:
<input type="image" src="button_update.gif" border="0" alt="Update" name="udpate" title=" Update ">
I was facing the similar problem and after Googling for 2 hours, I figured out a solution, what I have done is registered an event before the save command is executed:
var saved = false;
CKEDITOR.replace('#myTextArea', options);
CKEDITOR.plugins.registered['save'] = {
init: function (editor) {
editor.on( 'beforeCommandExec', function(event)
{
if (event.data.name === 'save') {
saved = true;
}
});
}
};
$(window).on('beforeunload', function () {
if (saved === false) {
if (CKEDITOR.currentInstance.checkDirty() === true) {
return 'You have some unsaved changes on this page, are you sure you want to leave?';
}
}
});
Though this is very old question, I think my answer will help some one.
I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:
if (jQuery('#top').checked) {
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
}
That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.
What does firebug or Chrome console tell you? You could try something like this:
$('#top').is(':checked')
as in (thanks RET):
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
}
return false;
});
try
$('#top').is(':checked')
but the function submit only binds the function and calls it every time submit is clicked.
so you must put the checked check in the submit function
jQuery('#post').submit(function() {
if(!$('top').is(':checked')){ return };
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
});
Yeah, that logic won't quite do what you're hoping for. Try something like:
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
// all your existing code
I could be wrong, but I don't think the answer given by #greener is going to work, because that will only declare the submit function if #top is checked at page create time.
My Requirement is to hide a tag initially, if user clicks forwardbutton without checking any radio or checkbutton we have show the tag and have to prevent page refresh. But it is permanently not submitting on click, Plese someone help me.
$(document).ready(function()
{
var y=$('input').filter(':checked').length;
alert(y);
if(y == 0 )
{
$('#Q1_7_label').parents('TR').hide();
}
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
});
});
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
return true;
});
Just add return true at the end of the function
Try to replace
return false;
with
event.preventDefault();
What I'm trying to achieve is to Warn the user of unsaved changes if he/she tries to close a page or navigate away from it without saving first.
I've managed to get the OnBeforeUnload() dialog to pop-up... but I don't want it to be displayed at all if the user hasn't modified any field values. For this, I'm using this hidden input field called is_modified that starts with a default value of false and flips to true when any field is edited.
I tried to bind the change event to this is_modified field to try and detect for value change... and only then activate OnBeforeUnload.
$( '#is_modified' ).change( function() {
if( $( '#is_modified' ).val() == 'true' )
window.onbeforeunload = function() { return "You have unsaved changes."; }
});
But from what I figure is that the change() event works only after these 3 steps - a field receives focus, a value is changed and the field looses focus. In case of the hidden input field, I'm not sure how this receiving and loosing focus part works! Hence, the onbeforeunload function is never being activated.
Can anyone suggest a way to maintain a trigger over is_modified?
Thanks.
I had a similar requirement so came up with following jQuery script:
$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Your unsaved data will be lost.";
}
}
$("select,input,textarea").change(function() {
needToConfirm = true;
});
The above code checks the needToConfirm variable, if its true then it will display warning message.
Whenever input, select or textarea elements value is changed, needToConfirm variable is set to true.
PS: Firefox > 4 don't allow custom message for onbeforeunload.
Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=588292
UPDATE: If you are a performance freak, you will love #KyleMit's suggestion.
He wrote a jQuery extension only() which will be executed only once for any element.
$.fn.only = function (events, callback) {
//The handler is executed at most once for all elements for all event types.
var $this = $(this).on(events, myCallback);
function myCallback(e) {
$this.off(events, myCallback);
callback.call(this, e);
}
return this
};
$(":input").only('change', function() {
needToConfirm = true;
});
The following works well in jQuery:
var needToConfirm = false;
$("input,textarea").on("input", function() {
needToConfirm = true;
});
$("select").change(function() {
needToConfirm = true;
});
window.onbeforeunload = function(){
if(needToConfirm) {
return "If you exit this page, your unsaved changes will be lost.";
}
}
And if the user is submitting a form to save the changes, you might want to add this (change #mainForm to the ID of the form they're submitting):
$("#mainForm").submit(function() {
needToConfirm = false;
});
We just use Window.onbeforeunload as our "changed" flag. Here's what we're doing, (using lowpro):
Event.addBehavior({
"input[type=radio]:change,input[type=text]:change,input[type=checkbox]:change,select:change": function(ev) {
window.onbeforeunload = confirmLeave;
}
".button.submit-button:click": function(ev) {
window.onbeforeunload = null;
},
});
function confirmLeave(){
return "Changes to this form have not been saved. If you leave, your changes will be lost."
}
$(window).bind('beforeunload',function() {
return "'Are you sure you want to leave the page. All data will be lost!";
});
$('#a_exit').live('click',function() {
$(window).unbind('beforeunload');
});
Above works For me.
Try your logic in a different manner. Meaning, put the logic for checking the value of the input field in your onbeforeunload method.
window.onbeforeunload = function () {
if ($("#is_modified").val() == 'true') {
return "You have unsaved changes.";
} else {
return true; // I think true is the proper value here
}
};
in IE9 you can use simple return statement (re) which will not display any dialogue box. happy coding..
why not have the onbeforeunload call a function that checks if the values have changed, and if so return the "unsaved changes" confirm?