when you enter text into the status box and click on any hyperlink or click on the back button, a dialog window will display the following message "Are you sure you want to leave this page?"?
Does is this done? how do you do it?
You need to set a dirty flag
<script type="text/javascript">
var isDirty=false;
window.onbeforeunload =function() {
if (isDirty) return "Form not saved";
}
window.onload=function() {
document.getElementById("someFieldId").onblur=function() {
isDirty=this.value.length>0;
}
}
</script>
.
.
.
Related
I'm using jQuery UI to present a dialogue box asking, "Do you really want to perform this action?" when a user clicks on a hyperlink or a form button.
If the user clicks "Confirm" then I want to perform the original default action.
Here is my code:
[html]
Click me
[jquery]
// Global variable keeps track of whether the user has clicked confirm
var confirmed = false;
$("a").on("click", function(e) {
var self = $(this);
var options = {
autoOpen: true,
modal: true,
title: "Confirmation Required",
buttons : {
"Confirm" : function() {
// The user has confirmed, so set global variable to true
confirmed = true;
// Re-trigger the click
self.trigger("click");
},
"Cancel" : function() {
$(this).dialog("close");
}
}
};
// If the user hasn't yet confirmed, display the dialogue box
if (confirmed == false) {
$("<div />").text("Are you sure you want to do this?").dialog(options);
// Prevent the default action
e.preventDefault();
}
// Otherwise the user has confirmed, so don't preventDefault and return true
else {
confirmed = false;
// Alert here to check we reached this point
alert("Returning true");
return true;
}
});
When first clicking the link, the default action is prevented and the dialogue box opens.
When clicking "Confirm" in the dialogue box, the click event is triggered again, and the alert box fires saying, "Returning true". All good so far, however the page doesn't load. So for some reason second time around the default event is still prevented and I can't for the life of me figure out why.
This is most likely due to the fact the dialog is still open. However even if you close it, you will not be able to click the a element like this.
trigger('click') only triggers the function which is bond to the click event in jQuery and if you would use $el.click(), I think it only supports format <a onclick="func()">Click here</a>
How I solved this; On the dialog confirmation I update the window location with jQuery based on the <a> elements href.
Please see working snippet below;
Click me
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var confirmed = false;
$("a").on("click", function(event) {
var $self = $(this);
if (!confirmed) {
event.preventDefault();
$("<div />").text("Are you sure you want to do this?").dialog({
autoOpen: true,
modal: true,
title: "Confirmation Required",
buttons : {
"Confirm" : function() {
window.location.href = $self.attr('href');
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
}
});
});
</script>
I want to show "onbeforeunload alert" when tab is closed but when I fill the form and then I close the tab "onbeforeunload alert" isn't appearing.
How can I change the code so "onbeforeunload alert" can show when the form is filled?
There's the code that I use:
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You are about to exit the system before freezing your declaration! If you leave now and never return to freeze your declaration; then they will not go into effect and you may lose tax deduction, Are you sure you want to leave now?";
}
$(function() {
$("a").click(function() {
window.onbeforeunload = null;
});
$("input").click(function() {
window.onbeforeunload = null;
});
});
How can I change the code so "unbeforeunload alert" can show when the form is filled?
You are actually clicking the <input /> by filling the form right? So once you click the <input />, the unbeforeunload is set to null (removing the alert) by the following code:
$("input").click(function() {
window.onbeforeunload = null;
});
Kindly remove that code, and you are all set. :) Or you can target the submit button, more specifically:
$("input").click(function() {
window.onbeforeunload = null;
});
$("input[type='submit']").click(function() {
window.onbeforeunload = confirmExit;
});
Is there away that the confirm box appeared, if i clicked "ok" it will go to another page and if i clicked "cancel" it will just stay and the current page will not reload again? THANK YOU.
function reload()
{
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
window.location = "http://www.yoururl.com";
}
else
{
//do nothing
}
}
call this function when you want to confirmation from user.........
You can use confirm() for this, which returns true on ok or false on cancel.
function myFunction(){
if(confirm("Would you like go to other page?")){
window.location = "http://yahoo.com";
}else{
alert('fine, if not want');
}
}
myFunction();
Updated
DEMO
UPDATED2
<button onclick="return logout()" >logout</button>
<script>
function logout(){
if(confirm("Would you like go to other page?")){
window.location = "failed.php";
}else{
//do your stuff on if press cancel
}
}
</script>
You may try doing
<script>
function myfunction(){
if(confirm("The confirm message")){
youDoTheThingsHere();
return false;
}else{
console.log("I cancelled the dialog!");
return false;
}
}
</script>
I'm not sure about your certain situation and the code that is involved when you call the confirm, but this has worked for me. The other option you may look at as a last resort is using something like a bootstrap modal to trigger a "confirm" modal. With the bootstrap modal you can then style it how you want... hope I could help!
Use "return None"
function myFunction(){
if (confirm("Confirm to reset your content!")){
location.reload();
}else{
return None;
}
}
I have a screen where I don't want the user to click on the back button. Now I am doing an ajax call to show that screen. There a button on it, when the click event is fired I want to redirect to the home page. Here its is.
$.post("<?php echo base_url();?>register/citizen", myobj2, function(data){
$("body").empty().append(data);
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";
window.onhashchange=function(){window.location.hash="no-back-button";}
window.onbeforeunload = function() {
return "If you leave this page you will have to register again.";
}
});
On the page that comes in I have
$(document).ready(function(){
$("#localfinal").unbind('click').on("click", function(){
//$().redirect('<?php //echo base_url();?>');
window.location(<?php echo base_url();?>);
});
});
When the user clicks the button, I get the message about leaving the page. Instead I just want to redirect to the base url (home);
Any ideas ?
Reset onbeforeunload handler, btw, i don't think you need to unbind() click handler:
$("#localfinal").on("click", function(){
window.onbeforeunload = $.noop;
window.location(<?php echo base_url();?>);
});
Try this
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
I assign the element id "btn_submit" to write_ok button.
I wanted the following:
if I press write_ok button,
do write,
else (if I do not press write_ok button)
do alert message before page exit.
I don't know how can i find out which button was pressed.
I found this, but I cannot get it to work: jQuery: how to get which button was clicked upon form submission?
<script type="text/javascript">
$(window).bind('beforeunload', function(){
if ( #btn_submit was not pressed )
return 'If you exit the page, you may lose your changes';
});
</script>
You can do something like,
<script type="text/javascript">
var btn_submit_pressed = false;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'If you want to exit page, you may lost your writing';
});
$('#btn_submit').click(function(){ btn_submit_pressed=true; });
</script>
You could introduce a variable:
var isSaved = true; // at the beginning there's nothing unsaved
Whenever the user updates something, set:
isSaved = false;
When the user clicks submit, set:
isSaved = true;
Then in beforeunload, just check:
if(!isSaved) {
Pawar's code is a big idea.
to compress and generize the code, #btn_submit changed to "input submit".
message in return is appear only IE not firefox, chrome.
<script type="text/javascript">
var btn_submit_pressed = true;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'if you leave this page, chages will be lost.';
});
$('#btn_submit').click(function(){ btn_submit_pressed=false; });
</script>