I put following script to prevent leave page meanwhile processing steps
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
JQObj.ajax({
type: "POST",
url: "<?php echo $this->url(array('controller'=>'question','action'=>'cleaSess'), 'default', true); ?>",
success: function(data){}
});
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
But every time i get default alert message instead of i set custom alert message,
And i want to call ajax call when end user click on "Leave page" button, but in above script ajax call calls before the click leave button,
Anyone have idea or logic to call ajax if and only if people leave the page.
You can use the "unload" event for sending the AJAX request:
<script type="text/javascript">
window.onbeforeunload = function() {
return "You have attempted to leave this page. "
+ "If you have made any changes to the fields without "
+ "clicking the Save button, your changes will be lost. "
+ "Are you sure you want to exit this page?";
};
window.onunload = function() {
// Ending up here means that the user chose to leave
JQObj.ajax({
type: "POST",
url: "http://your.url.goes/here",
success: function() {}
});
};
</script>
See, also, this short demo.
You shold try something like this:
window.onbeforeunload = displayConfirm;
function displayConfirm()
{
if (confirm("You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"))
{
confirmExit();
}
}
Related
I am attempting to simply capture when my form is dirty and if it has been changed, alert the user before they leave the page without saving.
Here is my current code:
<script>
var form = $('#MyForm'),
originalForm = form.serialize()
$(window).bind('beforeunload', function () {
if (form.serialize() != originalForm) {
return 'You have unsaved changes';
}
});
</script>
Nothing happens above. I can use beforeunload method just fine until I attempt to add the "dirty" field check, then nothing occurs.
Any help?
I have a Signup page where after the form's submit I send a AJAX POST. There is no problem at all except that, in the success function, I have an alert function that doesn't wait for the user input, but executes the next function immediately.
This is the SubmitHandler Function:
submitHandler: function (form) {
$("#Sign_Button").attr("disabled", "disabled");
$.ajax({
type: "POST",
url: "ws/users/insert.php",
data: $("#form_sign").serialize(),
success: function (data) {
$("#Sign_Button").removeAttr("disabled");
console.log(data);
if (data.success == 1) {
alert("Success.");
window.location.href='./index.php';
}
}
});
}
Note: I tried with window.location.href and window.location, but in both cases it does the same thing: Popup the alert but also redirect to index.php without waiting, closing the popup alert.
NOTE: Please note that both with Alert and Confirm I have the same behaviour
As was answer in this question, you can pause the code using the alert inside of an if. This will also show only an "OK" button (instead of confirm's "yes/no").
It's important to put the ! before the alert call, as the alert function will return always undefined
this is the part of the code with the alert pausing the code:
if (data.success == 1) {
if(!alert("Success."))
window.location.href='./index.php';
I guess you want to use the confirm dialog instead of alert.
Example usage:
if (window.confirm("Do you really want to leave?")) {
window.open("exit.html", "Thanks for Visiting!");
}
More info here
This is the exact behaviour that is expected.
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
You would need to put the alert on the ./index.php page
Or you can use the dialog element
(function() {
var showBtn = document.getElementById('showBtn');
var myDialog = document.getElementById('myDialog');
showBtn.addEventListener('click', function() {
myDialog.showModal();
});
})();
<dialog id="myDialog">
<form method="dialog">
<div>Success</div>
<button>Ok</button>
</form>
</dialog>
<button id="showBtn">Show</button>
Is It possible to call a user defined JS function when the page refresh button is clicked? I want to call a reload function, if yes is clicked I want the user to logout.
Below is my code
I used. but am getting a different confirmation pop up which reloads the page. I am nor able to call my custom function. Below is my code window.onbeforeunload = function() {
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
sessLogOut();
}
else
{
//do nothing
}
};
A good solution for you may be using this in your html:
<body onunload="pageUnload()">
and this in JS:
function pageUnload(){
if(confirm("Do you want to leave page!")){
// DO SOMETHING
} else {
// DO NOTHING
}
}
I want to show a simple popup using alert() , however, only after the page is reloaded fully.
Right now, the popup, is displayed and disappears after a second or even less because the code is executed at the same time.
My code in the ajax success:
success : function( response ) {
location.reload();
alert(response);
}
How to make the code to be executed one after another and not at the same time?
If you reload the page, basically the JavaScript will essentially "reset", so nothing after the reload() call will continue to run. You may need to consider placing a variable in localStorage, and doing your alert on document.ready.
Here would be an example. Let's say that you want to refresh the page after the user clicked a particular button.
$(".myButton").on("click", function(){
localStorage.setItem("buttonClicked", true);
location.reload();
});
$(document).ready(function(){
// This function will run on every page reload, but the alert will only
// happen on if the buttonClicked variable in localStorage == true
if(localStorage.getItem("buttonClicked");
alert("you clicked the button!")
}
});
I'm using the jQuery validation plugin for a form contained in a colorbox. I want to close the colorbox and open a second colorbox (saying thank you) if the validation is successful, and then send the user to their original destination.
The script captures the destination of the user and puts it in a variable, then opens a colorbox. Users can exist the colorbox in four different ways, clicking off the bock, clicking the x in the upper right corner, clicking the close button, or a successful submit. Then they continue on their way.
What I need is something like an if submit successful, then open thank you colorbox. What I've tried so far just breaks everything.
$('#lookUpSubmit').unbind('click').click(function(){
$form.submit();
});
$("#lookUpCancel").unbind('click').click(function(){
$.colorbox.close();
});
$(document).bind('cbox_closed', function() {
window.location = destination_url;
});
$form.validate({
submitHandler: function(form) {
form.submit();
},
//some stuff
});
What exactly happens when de submit was successful ? Do you redirect to a page or something ? As far as JavaScript is Client based you have no influence or whatsoever on where the server brings you. You could implement the Thank You Popup on the Webpage which you are redirected after a successful submit !
The information you've provided is a bit vague. What do you mean specifically by "everything breaks"?
What you describe could be caused by a number of things:
Is $form actually defined somewhere, or did you mean to use $(form)?
Have you verified that your unbind/bind chaining is working properly?
$('#lookUpSubmit').unbind('click').click(function(){
alert("B2K Was Here!");
});
Submitting a form will reload the page or redirect to the action url. You need to prevent the submission.
$('#formid').submit(function(e) {
e.preventDefault();
// validate here
if ( valid ) {
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
success: function() {
// open thank you colorbox here
}
});
}
});