We Keep Coding

jQuery Issue about Continue button opens external link in multiple browser tabs

I am doing one feature about showing alert on external link(apart from current domain) click. For that, I have written below code. All is working fine except below scenario.
$('a').each(function() {
var $a = jQuery(this);
if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
$a.click(function(event) {
//console.log($a.get(0));
//var myClasses = this.classList;
//console.log(myClasses.length + " " + myClasses['0']);
$("#redirectconfirm-modal").removeClass('hide');
if (!confirmed) {
event.preventDefault();
event.stopPropagation();
$modal.on('show', function() {
$modal.find('.btn-continue').click(function() {
confirmed = true;
$a.get(0).click();
$modal.modal('hide');
location.reload();
});
});
$modal.on('hide', function() {
$a.get(0).removeClass("selected");
confirmed = false;
});
$modal.modal('show');
}
});
}
});
Scenario which produces this issue:
Click on any external link from the site, it open a modal popup for redirection confirmation with continue & return button.
If I click on "Return" button it closes the modal popup.
Now, I am clicking on external link from my site, it open the modal again but this time I am clicking on "Continue" button & guess what, it open that external link in 3 different tabs
Actually on each anchor tag click, it saves whole anchor tag value. I think, if remove all these anchor tag values on modal close code i.e. $modal.on('hide', function() { }) it will resolve problem. I had tried with many different ways but still facing this issue.
Can you please provide solution/suggestion on that?

Problem is when you have 3 external links (as you probably have), than you set 3 times this part of code:
$modal.on('show', function() { ... });
$modal.on('hide', function() { ... });
which is wrong. Those events listeners should be set only once.
Some simplified code would look like this:
var $modal = $("#redirectconfirm-modal");
var currentDomain = 'blabla';
$modal.on('click', '.btn-continue', function(e) {
window.location = $modal.data('redirectTo');
});
$('a').each(function() {
var $a = jQuery(this);
if( $a.get(0).hostname && getDomain($a.get(0).hostname)!=currentDomain ) {
$a.click(function(e) {
$modal.data('redirectTo', $a.attr('href'));
$modal.modal('show');
});
};
});

Don't inline your events, you may try something like this:
$('a').each(function() { //add a class to all external links
var $a = jQuery(this);
if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
$a.addClass('modalOpen');
}
});
$('.modalOpen').not(".selected").click(function(event) { //open the modal if you click on a external link
event.preventDefault();
$('.modalOpen').addClass('selected'); //add class selected to it
$modal.modal('show');
});
$modal.on('hide', function() {
$('.selected').removeClass("selected");//remove the class if you close the modal
});
$('.btn-continue').click(function() {
$('.selected').click();//if the users clicks on continue open the external link and hide the modal
$modal.modal('hide');
});

How to get Chrome to throw exception when changing url if it fails

I have a reference to a new window opened with js
var theNewTab="";
theNewTab = window.open(theURL, 'winRef');
then I change the url in the as the user clicks on another link in the parent window using
theNewTab.location.href = targetLink;
theNewTab.focus();
The problem i'm having with chrome that id doesn't throw exception if the the window doesn't exist anymore "closed" unlink FF & IE which im using to open the window again.
try {
theNewTab.location.href = targetLink;
theNewTab.focus();
}catch(err) {
theNewTab = window.open(theURL, 'winRef');
theNewTab.focus();
}
PS: I tried to use "window.open" every time but if the window already open, id does not reload the page or it does but it doesn't re-execute the script I have in document ready I think.

I'm not sure what you need.
<script type="text/javascript">
var theNewTab = null;
function openNewTab(theURL) {
if (theNewTab == null || theNewTab.closed == true) {
theNewTab = window.open(theURL);
} else {
theNewTab.location.href = theURL;
}
theNewTab.focus();
};
// use the function when you need it
$('a').click(function() {
openNewTab($(this).attr('href'));
});
</script>
Is this example helpful for you?

Navigate stop only when going to another website

I am using following code to trigger the are you sure leaving website alert but for some reason its not recognising my if else condition in it and only works if I only put return true in window.onbeforeunload = function() { return true } . Is there a way I can trigger this alert only when user is navigating away from my website cause at the moment without if else condition its asking if user tries to navigate in the same website as well?
window.onbeforeunload = function() {
var location = window.document.activeElement.href;
if (typeof location != 'undefined')
{
console.log(location);
} else { reutn true; }
};

You can set a flag and toggle that flagged based on host of links that are clicked
var host = location.hostname,
allowNavigate = false;
window.onbeforeunload = function() {
if (!allowNavigate) {
return 'Message string';// not what actually gets displayed in most browsers these days
}
//don't return anything
return;
};
window.onload = function() {
document.querySelectorAll('a').forEach(function(a) {
a.addEventListener('click', function(e) {
allowNavigate = this.hostname === host;
});
});
};
The hostname on this page for example is "stackoverflow.com"
DEMO

You can add the "window.onbeforeunload" dynamically for the links you want to see the prompt message
and remove the "window.onbeforeunload" for the links you don't want prompt
<a onClick="a(true)" href="https://www.w3schools.com">Click here to get promt before navigate</a>
<br>
<a onClick="a(false)" href="https://jsfiddle.net/">Click here to navigate without promt </a>
<script>
function a(showPrompt){
window.onbeforeunload = showPrompt ? function(e) {return '';}: null;
}
</script>
https://jsfiddle.net/vqsnmamy/1/

Close child window on f5 refresh

I have a piece of code that launches another page in an external window.
var myOpenWindow = window.open(...);
I manage this window throughout the applications life cycle and once the forum is completed my managing state closes this window.
However, the issue I am facing is that if the user hits f5 for a hard refresh the window is still open after the main page loads.
At first I thought I could override the window.open to track the state of open windows from my app in a global variable. However, I overlooked the fact that on an f5 reset my global is lost.
This seems like a simple problem, but the solution has evaded me. Is there anyway to close a window opened by window.open when the parent is refreshed?

var myOpenWindow = window.open(...);
window.onunload = function(){myOpenWindow.close()};
or better
window.addEventListener('unload',function(){myOpenWindow.close()})
should do that.
MDN: WindowEventHandlers.onunload

Maybe you could use a DIV and place it in the center of the screen. Add some jQueryUI magic and you don't have to worry about popups or blockers or other stuff.

You can keep the window open, with the following code :
When you reload the parent page, the child will change the myOpenWindow when parent page will be loaded.
Parent window :
function detectChild(child) {
myOpenWindow = child;
//opener.actionWhenOpen();
}
var myOpenWindow = window.open(...);
window.onunload = function() {
if (myOpenWindow) {
myOpenWindow.refreshParent();
}
};
Child windows :
if (opener) {
//opener.actionWhenOpen();
opener.onunload = function() {
if (opener && opener.myOpenWindow) {
opener.myOpenWindow.refreshParent();
}
};
}
function refreshParent() {
this.i = ((this.i) ? this.i : 0)+1;
var i = this.i;
setTimeout(function() {
if (!opener) {
return console.log("Opener closed.");
} else if (opener.detectChild && !opener.myOpenWindow) {
this.i = 0;
opener.detectChild(window);
} else if (i < 900) {
console.log("Opener cheked("+i+").");
refreshParent(i++);
}
}, 50);
}

window.self.close() not working

I opened a print window using window.print(). I tried using window.self.close(),
but I was unable to close that one. I am using Firefox. My idea was to close the window by itself if the user doesn't perform any action on it.
This is the code I am using for print window.
$('.click-print-paybymail').live("click", function (e) {
var amount = $('.amount-enclosed').val();
var ccnum = $('.credit-card-account-number').val();
var isAllow = true;
if (!isValidCC(ccnum)) {
isAllow = false;
}
if (!isValidAmount(amount)) {
isAllow = false;
}
if (isAllow) {
window.print();
}
});

You can not close the print dialog programmatically from javascript since it is not a browser window - its an operating system dialog.