Catching & re-calling event in custom confirmation box in javascript - javascript

I'm building a custom confirmation popup which comes when ever user want to navigate from page without saving any detail. & I'm not able to find a right way to do this ?
Basically I have decided to put a function on window.beforeunload = func(e) event and use
e.preventDefault(); this syntax to prevent the redirect , actually the occurrence of event e. Now is there any way to re-fire the same event(It could be page redirect/ submit), If use clicks on the 'Ok' button.

You cannot use event.preventDefault() in window.onbeforeunload. You can only return dialogue for the onbeforeunload() function to give to the user.
https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

Related

Detect link click event in chat window

I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});

Trigger an event on back button in browser/android with javascript

My angular app's content creation flow is being broken by androids and browsers physical buttons which take the user to where they came from instead of previous step in the process. I tried fixing it with locationChangeStart as well as few other similar events, but they all get triggered both by my "Continue" buttons as well as physical "back" buttons.
Is there a way to trigger an event only when user presses browsers/android's back button, or alternatively to know if locationChangeStart was triggered by the back button vs app's button? If possible, I would like avoid adding jQuery as we are not currently using it.
I gave up on trying to detect the user pressing back button and act on it. Instead, make it the default action and change the way our buttons behave. I detect when user is pressing one of our buttons and set a variable based on it.
var navigating = false;
$scope.$on('$locationChangeStart', function(event) {
if($scope.global.application="new-ad" && !navigating){
event.preventDefault();
$scope.areYouSure = true;
}
});
$scope.nextStep = function() {
navigating = true;
$location.url('/step-two');
}
Basically, we first set our variable to false, and if the user presses physical back, it will display the prompt alerting user they will lose their work. However, if the user instead uses our "continue" button, also triggering the locationChange, it will set variable to true, letting the app know what the locationChange is triggered from within the app and allowing it to continue.

message to be displayed for incomplete forms in php

I have a form where in user will enter all of its data to contact us . Now if user fills half of the form and lives in middle I want to ask him whether he really want to live this page .Is it possible? my form submission is done using ajax post method
You are looking for the beforeunload event (https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload). Here is a quick example:
window.onbeforeunload = function(){return "Are you sure?";};
It would probably be ideal to detect partial user input and only add the event listener when some input has been entered. You will also want to remove the dialog when input is completed, or the forum is submitted.
you can place validation function prior to ajax call and consider validation's return value to conclude either submit the form or display message using Confirm() function of javascript. onclick of "yes" on confirmation box you can fire ajax call, below is example of confirmation box in javascript.
if (confirm('Are you sure you want to leave this page?')) {
// leave the page
} else {
// do nothing
}

Custom confirm box that has some functionality to it with window close event

I'm presently writing JavaScript, on clicking the close button in the window, I should get a confirm box. In the confirm box, I should display some message and there should be cancel and continue buttons.
On clicking cancel, the window should not be closed, but on pressing continue, the window should be redirected to another jsp.
Can someone please help me with this code? I tried using the custom confirm box, but that seems to return only a string and it cannot be used to redirect to a page.
This is impossible. You cannot redirect the user to another page when they close the window. This is for security reasons.
To display a confirm box when closing the window, you can use the onbeforeunload event. This will ask the user if they wish to leave the page or not. The confirm box is rendered by the browser, all you can customize on is the text.
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When the user leaves the page, you can use the onunload event, but again, you cannot redirect them (you can make an AJAX call, but you cannot redirect the browser).
$(window).bind('unload', function(){
console.log('bye'); // Some browsers may block this.
// Chrome blocks alerts in this event.
});
check this example it may help you out
function setConfirmUnload(on){
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage(){
return "Are you sure you want to leave this page";
}
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).
You can try also this (link : http://api.jquery.com/unload/)
$(window).unload(function(){
alert("Bye now!");
});
You need to bind a handler to the onBEFOREunload event, as none of the functionality you want will be possible with the onunload event (it is too late).
var myFunction = function () {
return "Are you sure you want to leave the page?";
};
window.onbeforeunload = myFunction;
As far as I know, there is no way to react to the user input as the confirm box is handled by the browser.

trigger event on browser back button click

How do I listen for a browser back button click and call a function that I've defined and disable the normal behaviour of the back button? I'm using jQuery.
jQuery history plugin helps you to support back/forward buttons and bookmarks in your javascript applications. You can store the application state into URL hash and restore the state from it.
You could play with :
$(window).unload( function () { alert("Bye now!"); } );
.unload()
But this will be trigered when the user clicks a link that goes to another page , types a new address in the address bar or ... basicly it will be trigered whenever the user leaves the current page . I don't think you can stop the user from going away from you're page tough .
UPDATE:
unload() is now deprecated from jquery 1.8

Categories