Ask when close tab - javascript

I would like to ask user, when close my page. I tried this scripts:
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "alert";
}
</script>
.
<script type="text/javascript">
var areYouReallySure = false;
function areYouSure() {
if(allowPrompt){
if (!areYouReallySure && true) {
areYouReallySure = true;
var confMessage = "***************************************\n\n W A I T !!! \n\nBefore leaving our site, follow CodexWorld for getting regular updates on Programming and Web Development.\n\n\nCLICK THE *CANCEL* BUTTON RIGHT NOW\n\n***************************************";
return confMessage;
}
} else {
allowPrompt = true;
}
}
var allowPrompt = true;
window.onbeforeunload = areYouSure;
</script>
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).on('beforeunload', function() {
return "You should keep this page open.";
});
</script>
I read that in modern browsers scripts may not work. Is there any other way to solve this problem?

Related

add exception on onbeforeunload

I have this code on my sites:
<script type="text/javascript">
var popit = true;
window.onbeforeunload = function() {
if(popit == true) {
popit = false;
setTimeout(function(){
window.open("/out.php", "_blank");
window.location.href = "/out.php";
}, 0);
return "Do you really wanna exit this website?";
}
popit= true;
}
function noPop() {
popit = false;
}
(function(w,l,d){var cloc=l.pathname+l.search;history.replaceState(null,d.title,l.pathname+"#!/back");history.pushState(null,d.title,l.pathname);w.addEventListener("popstate",function(){if(l.hash==="#!/back"){noPop();history.replaceState(null,d.title,l.pathname);setTimeout(function(){l.replace("/out.php");},0);}},false);}(window,location,document));
</script>
But I have also an popunder code that triggers my onbeforeunload:
<script src="/js/p.js" data-endpoint-uuid="07c9a1e6-76be-45cb-9788-7a3e4e42b69b" data-subid="default" data-mode="popup" defer></script>
How I can add an exception for that pop script?
thanks

How to keep the input field disabled upon refresh as well?

I am disabling the input field after the user enters the data and submits. But, if we refresh or press ctl+F5 the disabled fields enables and becomes editable. Below is the code I have, what should I do to keep it disabled even upon refresh? Thank you.
<script type="text/javascript">
document.getElementById('myButton').onclick = function() {
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
};
</script>
I am using localstorage to store the data
Easiest solution is to use sessionStorage:
<script type="text/javascript">
const disableInputs = function() {
sessionStorage.disableInputs = 'true';
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
};
if (sessionStorage.disableInputs === 'true') disableInputs();
document.getElementById('myButton').onclick = disableInputs;
</script>
If you want the disable effect to last past the session, use localStorage instead.
Use sessionStorage :
<script type="text/javascript">
var disable = function() {
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
sessionStorage.setItem("isDisabled", true);
};
document.getElementById('myButton').onclick = disable;
if(sessionStorage.getItem("isDisable") === 'true') {
disable();//call your function
}
</script>
Put the setting inside
COOKIE version
function disablefield(){
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
}
document.getElementById('myButton').onclick = function() {
$.cookie("is_disable", 1);
disablefield();
};
if ($.cookie("is_disable")==1) disablefield();
</script>
Session version
function disablefield(){
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
}
document.getElementById('myButton').onclick = function() {
$.session.set("is_disable", "1");
disablefield();
};
if ($.session.get("is_disable")==1) disablefield();
</script>

show() does not work

I am trying to display a loading spinner when a user clicks on the submit button. I tried implementing the solution provided here, but it's not working.
I have validated that the function is being called and that the target div is being found by jQuery by tossing in an alert(spinner.innerHTML) as follows:
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
As expected, when I click on my button, I get an alert window with the text "Loading..." which is the text from my div. However, if I add a second alert after the call to spinner.show(); it doesn't pop up, which leads me to believe that the call to spinner.show(); is causing jQuery to fail.
This is my first foray into jQuery, so I'm struggling with how to debug this and find out what is breaking.
Based on the debugging procedures, it looks like your project has not included jQuery library.
Please enable jQuery in your project to make use of jQuery functionality.
you should define spinner correctly(i.e. in global)
<script type="text/javascript">
var spinner;
$(document).ready(function () {
spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
You're trying to access the spinner variable without having scope to it in the function.
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
var spinner = $("div#spinner");
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
var spinner = $("div#spinner");
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>

Easy javascript if and else. If url is return and else scroll to anhor

<script type="text/javascript">
if (location.href == "http://www.mysitemain.com")
{
return false;
}
else
{
window.onload = function() {
var el = document.getElementById('wrap');
el.scrollIntoView(true);
}
}
</script>
Anyone can help me fix this code ? Trying to make something like if the site url then return false else go to anchor
There's no need for a "return" statement; your code isn't in a function. Just test for the URL being not equal to the string:
if (location.href != "http://www.mysitemain.com") {
window.onload = function() {
document.getElementById('wrap').scrollIntoView(true);
};
}

applying a var to an if statement jquery

Need to apply a var to a statement if its conditions are met, this syntax isn't throwing errors but its not working.
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
//stuff here
$(this).ready(function () {
if ($("#stepDesc0").is(".current")) {
action_is_post = true;
}
});
//stuff here
</script>
should I use something other than .ready? Do I even need the $(this).ready(function ()... part? I need it to apply the var when #stepDesc0 has the class current.
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
if ($("#stepDesc0").is(".current")) {
var action_is_post = true;
}
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});
<script type="text/javascript">
$(document).ready(function(){
var action_is_post=$("#stepDesc0").is(".current");
});
</script>
If you want the variable to be accessible outside the $(document).ready(function(){..., then you'll need to declare it outside the statement like this:
<script type="text/javascript">
var action_is_post;
$(document).ready(function(){
action_is_post=$("#stepDesc0").is(".current");
});
</script>
HTML (in order to test it):
Show value
$(function() {
var actionIsPost = $('#stepDesc0').is('.current');
alert( actionIsPost );
});
If you are adding the current class to #stepDesc0 on an event then put the .is check in the event handler.

Categories

Resources