Develop Reference

how to avoid refresh page or back button click when popup is open using jquery?

I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?

You can not prevent user clicking the refresh button.
Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.
If so, just show the modal again. There's no any other way.
//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
localStorage.setItem("IS_SET", true);
});
$("#modal-dialog").on("hidden.bs.modal", function(){
localStorage.setItem("IS_SET", false);
});
$(document).ready(function(){
if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
//Which means the user was in the form process.
//And show the modal again on page refresh.
$("#modal-dialog").modal("show");
}
});
If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.

How to check if user is refreshing the page or navigating to other page

Scenario: I want to set some variable in my localstorage whenever user leaves the page.
Using window.onbeforeunload I get the event that user is about to leave the page. But I want to set different variable value when user refreshes and different on page navigation
var someVar;
//when refresh someVar = 1;
//When user clicks on any link which is not the same page, someVar =2
Is this possible to detect if user is refreshing or about to leave page?

Based on your comment I am updating my answer. You can't detect navigation type on beforeunload event or with any other method because it is browser dependent. But I can provide you a way to detect back or refresh after the page loaded. I hope it will be useful.
Please check performance navigation
if (performance.navigation.type == PerformanceNavigation.TYPE_RELOAD){
//Reload
}
if (performance.navigation.type == PerformanceNavigation.TYPE_BACK_FORWARD){
//Back Button
}

Back-Button from a php to a html page div id without history.back()

i got a problem with a connection between two html files with a *.js
i got index.html i got a formular.php and i got a backbutton.js
what i want to do is: if i send my fomular via button im calling the formular.php to write the text into my MySQL database. If someone forgets to put in an e-mail adress i got a error page which got a button "back". with that button i want to get back to the formular page.
My Problem is that my index.html is a page with 3 differt divs with the ids page1, page2, page3. when the user finishes a quiz the page changes itself from page1 to page2 with a
function checkplayer() {
if (player1 == true && player2 == true && player3 == true && player4 == true) {
setTimeout(function() {
$(document).ready(function() {
$("#page1").fadeOut(1000);
setTimeout(function() {
$("#page2").fadeIn(1000);
}, 1500);
});
}, 1000);
}
so my whole page is 1 page at all with 3 differnt divs that are faded in and out.
If i use my back button from the formular.html with history.back(); i land at the page1 div. But i need to get to the page3 div with the formular. Same happens if i reload my page. i always land on page1 since my index.html starts with page1 and page2 and page3 are set to display: none. Thats why i guess the history back is not working in this case since i step back always means a new loaded index.html
What i tried is to make a backbutton.js
function backButton() {
jQuery("#errorpage").fadeOut(0);
jQuery("#page3").fadeIn(0);
}
The errorpage is faded out but the page3 is not faded in because the backbutton.js doesnt know the index.html in which the page3 div is.
Is there any possiblity to get the errorpage to fadeout and the index.html page3 to fade in? is it possible to "import" the index.html page3 div into the backbutton.js?
Anyone got an Idea on how to get a connection between these 3 files or if there is any other way to get the errorpage to fadeout and my page3 div to fadein?
Any help is appreciated. Thank you

You can pass the hash to a URL:
function backButton() {
jQuery("#errorpage").fadeOut(0);
window.location = "index.html#page3";
}
and then check for the same hash on original page like this:
function checkHash() {
$(document).ready(function() {
if (window.location.hash === "#page3") {
$("#page3").fadeIn(1000);
}
});
}
Also, consider not allowing user to go forward at first place, if e-mail address is not entered.

Consider using the hash (#) to identify the 3 different pages; i.e. when switching from page 1 to page 2 signal it by changing your URl to 'YOUR_PHP_PAGE.php#page2' etc. This way, the browsers history (as well as re-load) should be able to correctly handle it. In the page-JS listen to the hash-changed-event and show the appropriate div. (Note that changing the hash by location.href = ...#page2 does NOT re-load the page, but triggers the event.)
Regarding the error page (fade in/out) you could place it on the same page. Then use ajax to post the data back to the server instead of loading a new page..

You can use hash term as id in div and wee can call by adding hash like this (index.html#page2) to land on the specific div. This directly lands to the id instead of reload the whole page. Same time we can use fade in fade out using jquery and ajax script to post the data

It has been common to direct the user using anchors. With HTML5 you can make use of the history / state APIs through History.js.
I rewrote your code using the history.js plugin. Read the comments within the sample code to see what is happening. Replace the page2finished() and throw_error() functions with your currently existing ways of telling when the user has finished page 2 and when an error should be shown. Those were included to show you the flow this code should take.
HTML
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/history.js"></script>
JavaScript
$(document).ready( function() {
var player1,
player2,
player3,
player4,
errorpage = $("#errorpage");
//Initialize the history.js script by binding it to the window object.
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
});
//Add page 1 to the browser history and load the first anchor.
History.pushState({state:1}, "Page 1", "?page=1");
//Make sure that the other elements are hidden when the user first loads the page.
$("#page2, #page3, #errorpage").hide();
function checkplayer() {
if (player1 && player2 && player3 && player4) {
$("#page1").fadeOut(1000, function() {
$("#page2").fadeIn(1000, function() {
//Add page 2 to the browser history and load the second anchor.
History.pushState({state:2}, "Page 2", "?page=2");
});
});
}
}
//After the user is done with page 2 throw them to page 3 by adding it to the browser history then loading the third anchor.
function page2finished() {
$("#page2").fadeOut(1000, function() {
//Add page 3 to the browser history and load the third anchor.
$("#page3").fadeIn(1000, function() {
History.pushState({state:3}, "Page 3", "?page=3");
});
});
}
//Something went wrong! Show the #errorpage element.
function throw_error(text) {
//Put the error text into the element and show it to the user.
errorpage.text(text);
//Hide the main pages.
$("#page1, #page2, #page3").hide();
//Add the error to the browser history and show that anchor.
errorpage.show();
History.pushState({state:3}, "Error", "?page=errorpage");
}
//The user clicked the back button
function backButton() {
errorpage.hide();
//We saved '3' linking to page 3 so tell history.js to go there.
History.back(3);
}
});

How can I get the destination url of a link on the web page in the Javascript onbeforeunload event?

Is it possible to capture what link on the web page the user clicked on?
Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.
This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.
They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.
I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.
I am using JQuery & Javascript.

Instead of having a completely different set of headers/footers you could replace all links in certain areas with links that open in a new window like so:
$('#header a, #footer a').each(function() {
$(this).attr('target', '_blank');
});

This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.
I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.
$('body a').click(function(e) {
//if link is reference to page element
if ($(this).attr('href').charAt(0)=="#") {
return;
}
//check if link is to same window
var pathname = window.location.pathname;
var pathname2 = $(this).attr('href');
pathname2 = pathname2.replace(/^.+\.\//, '');
if (pathname.indexOf(pathname2) >= 0) {
//link clicked is contained on same page
//prevent page from getting reloaded & losing data
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
//link clicked on is another page
if (hasMerchandise) { //var to indicate user has items on order form
//give user options: leave page, open link in other page, stay, etc.
// $('.popupForm-handleExitRequest').click(); //roll your own code
//prevent page from getting reloaded & losing data
//in case user wants to cancel page change or open link in another window
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
} else {
//load new page
$(this).removeAttr('target');
}
});

Detect if javascript dialog button clicked and redirect

Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David

If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.