beforeunload event and JQuery Dialog immediately closes after switch screen - javascript

Good day,
Here is the structure of my .php
Main.php
All of the navibar is here.
There's an Iframe screen also from my contents.
Content1.php
My content 1 contains textfields.
Jquery dialog if you are leaving the screens.
Content1 code :
$(window).bind('beforeunload', function(e){
dialog();
});
dialog();
$('form[name="rowform"]').on('submit', function (e) {
e.preventDefault();
});
var fieldNamesToCheck = xxxxx;
var previousValueFieldNames = xxxxx;
if (detectChangesOnInputs(fieldNamesToCheck, previousValueFieldNames)) {
$("#unsaved-values-confirmation-dialog").dialog("open");
$('.ui-dialog :button').blur();
}
for the close and refresh event, the beforeunload event does fine.
but when I start hitting my navibar,
what happen is, the dialog shows and immediately closes.
is there any wrong in my codes? thanks!

Related

jQuery hover box close issue

I am in the process of modifying a drupal 7 website for a client and have come across a problem trying to get a jQuery Login box working correctly as required.
You can see a working version of the site at http://www.tztesting.com
The idea is that when a user hovers over the Login link a login box should appear. When the user leaves the hover or submits the Login form the box must close.
I can get the box to open with no problem when I hover on the Login link and I can get the box to close when I leave the box without completing the form. The problem I am having is the box completing before the form is filled out. As far as I can tell this is happening because I am not using the mouseleave event correctly to close the box.
Here is my JS:
jQuery( document ).ready(function( $ ) {
jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeIn();
}, function() {
jQuery('.login-overlay-container').mouseleave(function(){
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeOut();
});
});
});
The horrible looking selector is because of the way Drupal builds its menu structure.
In the html there is a block of text inside a class called login-overlay-container.
I would appreciate it if someone could show me a way to allow the user to fill out and submit the form without the mouseleave event from firing and calling the fadeout function
Could you please try with below approach:
jQuery( document ).ready(function( $ ) {
jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeIn();
}, function() {
jQuery('.login-overlay-container').mouseleave(function(){
var hasFocus = false;
jQuery('.login-overlay-container input').each(function(){
if($(this).is(":focus"))
{
hasFocus = true;
}
});
if(!hasFocus){
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeOut();
}
});
});
});
In this approach we are checking whether any of textfield or checkbox has the focus. If any of them has focus then don't close the overlay otherwise close it.

Pop-up when leaving website

I've been asked to have a pop-up when visitors leave the site asking them if they really want to leave. This pop-up will only show if their shopping cart has items in it.
I can easily limit the pop-up to when the cart has items, however the issue I'm having is that even clicking an internal link loads the pop-up - how can I have it so this only comes up when actually leaving the site.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "some message about leaving";
}
</script>
If a link is clicked, it will tell you in e.target.activeElement. You can check if it's a link there:
window.onbeforeunload = confirmExit;
function confirmExit(e)
{
var $element = $(e.target.activeElement);
if ($element.prop("tagName") !== "A") {
return "some message about leaving";
}
}
Note: You can add additional conditions checking $element.attr("href") to make sure it displays the message for links that aren't your site.
Alright first of all: Don't do this. Please. It's super-annoying for users. Just make sure the shopping cart items are stored on the server or in a cookie so users can always go back to the site.
Looking at this related question: How can i get the destination url in javascript onbeforeunload event? it can't be done easily.
Instead of using onbeforeunload, either attach a click handler to external links on your site that shows the popup, or attach a click handler to all links that checks if the link is external or not.
Again, don't do this...
You could get the URL of a clicked link item, and check if it's on the same domain. Put this in an if not statement, with the current code inside.
you'll have to control it to enable and disable the behavior, something like this:
<script>
var beforeunload = function (event) {
var message = 'some message about leaving';
(event || window.event).returnValue = message; // Gecko + IE
return message; // Webkit, Safari, Chrome...
};
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
window.removeEventListener('beforeunload', beforeunload);
}
});
window.addEventListener('beforeunload', beforeunload);
</script>
this is going to remove the beforeunload event whenever a link is clicked on the page.
One way, and again, I wouldn't recommend doing this either - the user should be able to leave your site without receiving a warning - but you could unregister the event if a link has been clicked:
$('a').click(function() {
window.onbeforeunload = null;
return true; // continue
});

Jquery Show Popup only when window is closed

I am trying to display a confirmation message when the user closes the browser/tab and not when any of the links on page is clicked.
I have got the first part of displaying the message on window close working nicely but problem is that the message/alert is displayed also when user clicks on any link on the page.
I have got code from somewhere to prevent this behavior but still when ever any link is clicked the alert pops up.
Here is the code:
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/backfix-min.js"></script>
$(document).ready(function() {
$(window).bind('beforeunload', function(e){
$("#lead-gen-modal").dialog("open");
// This line only appears in alert boxes for IE
return "Wait\! Don\'t Go\! We have a special offer for you\. Stay on this page to receive big savings\!";
});
$("a").click(function() {
window.onbeforeunload=null;
});
});
just use a global variable
and set it to false when clicking a link.
var key = true;
$(window).bind('beforeunload', function(e){
if(key)
$("#lead-gen-modal").dialog("open");
});
update :
$(document).on("click","a",function() {
key=false;
});
or if you just want to prevent closing window you can do this :
window.onbeforeunload = function(e){
if(key)
return false;
}
I think you are looking for something like this.
$(window).unload(function() {
alert("bye");
});
If that does not work on Chrome try this
$(window).on('beforeunload', function() {
return "bye";
});
jQuery API: unload() http://api.jquery.com/unload/

How to prevent user from navigating to other pages in javascript silently (without confirmation dialogbox)?

I want to somehow prevent the user from navigating to other pages in javascript (silently without any comfirmation dialog).
I tried to do this with:
window.onbeforeunload = function (e) {
e.preventDefault();
}
OR
window.onbeforeunload = function (e) {
return false;
}
OR
window.onbeforeunload = function (e) {
return;
}
none of the above codes works. Except that the second example, displays an confirmation box.
The Problem is I want to prevent this silently (without any dialogboxes), like nothing has happened.
To display warning text to the user before the close:
window.onbeforeunload = function(e)
{
return 'You are about to close the page. Are you sure you want to do this?';
};
That said, you can't prevent a user from moving away from your site. That would be a security nightmare. Also, the user can always close the browser.

How to run function after press F5 (refresh)?

I tried to make some script that handle with event like "panel changes follow by URLhash". I had no problem with event on button or link but I had problem when I refreshed the page. My panel couldn't keep its values and automatically reset.
And I tried to solve refresh problem like this:
<script>
document.addEventListener('keydown', function(e) {
if(e.which == 116) {
window.alert("1234");
var id = window.location.hash;
changePanel(id);
}
}, false);
</script>
As code I shown you, alert() function it was working, but changePanel() wasn't working. I think because alert() had ran before refreshed and changePanel() also. But in case of changePanel() it ran before refresh then after refreshed all changes are reset to default.
How to run changePanel() after refresh?
It will not work, because after press of f5 page will be refreshed so new content will come on page, and so your panel/tab is reset..
You can try your code on
$(document).ready(
var id = window.location.hash;
changePanel(id);
);
Above code will automatically set tab after refresh button, and you can keep same code of that 2 lines on your button press, so that will work for your live page too. :)
This will work for you.
Thanks.
It works perfectly for me.
Call the funtion from your html
<button type="button" name="button" onclick="loro()">fdthd</button>
JS file
function loro() {
location.reload();
localStorage.setItem("po", "momo");
}
$(window).on("load", function() {
if (localStorage.getItem("po") === "momo" ) {
alert('Bien, ejecutaste el boton')
localStorage.setItem("po", "lulu");
} else {
alert('No has precionado el boton')
}
});
Before refresh the page I run a Function to save the "momo" value in the "po"key
After that, I refresh the page and check if PO has the value of momo. Depending on if I run the function before the refresh, it will run a specific alert.

Categories