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');
});

Detect content change on refresh

I'm doing a refresh inside the page to update a div, I'm trying to catch when the content in the div is changed, I tried using "DOMSubtreeModified" but it just detected the refresh every time.
I'm grabbing info from a page (donations.php) that just contains a dollar amount etc: $20.00 it refreshes every 5 seconds to look for new content. It updates okay but I want to trigger an alert on change not every 5 seconds.
function loadlink(){
$.get("donations.php", function(data) {
$('#results').html(data);
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
is my current code, I'm trying to detect a complete change on #results
Its a donation tracker for stjudes charity and I want to trigger an alert on the change.

You can store the old value of data and do a check against it.
(function () {
var dollarVal = "";
function loadlink() {
$.get("donations.php", function (data) {
$('#results').html(data);
if (dollarVal !== data) {
// trigger alert
alert("Value has changed!");
}
dollarVal = data;
});
}
loadlink();
setInterval(loadlink, 5000);
}) ();
If you don't want an alert on the first time load, then do:
if (dollarVal !== "" && dollarVal !== data)

jquery: check if window has been scrolled once and do something

Because of a new implementation of the cookie law, I have to gather consent for some cookies. One of the methods, is to wait for the user to scroll the page once, which has been legally meant to be an implicit consent.
I tried with:
jQuery(window).one('scroll', function(){
$(this).data('scrolled', true);
});
if(jQuery(window).data('scrolled')) {
console.log( 'ok' );
//place cookies
} else {
console.log( 'no' );
}
inside a script ( http://www.primebox.co.uk/projects/jquery-cookiebar/ ) that is called via:
$(document).ready(function(){
$.cookieBar({
});
});
However, console.log always tells me "no", regardless of the scrolling of the page.
Any hints?
Thanks in advance

Your code works fine if I change this like this:
<script>
jQuery(window).one('scroll', function()
{
$(this).data('scrolled', true);
if(jQuery(window).data('scrolled'))
{
console.log('ok');
//place cookies
}
else
{
console.log('no');
}
});
</script>
However I could not make out what $.cookieBar is doing ?

Check scroll and do some thing you want
window.onscroll = function (e) {
// called when the window is scrolled.
}
This will call every time when user scroll if you want to call it
only once then do some trict
Make a hidden Field
Now set value of this hidden field to true when scroll method call
window.onscroll = function (e)
{
if (document.getElementById("ScrollOnceCheck").value == "false")
{
document.getElementById("ScrollOnceCheck").value = "true";
// update cookie
}
}

Target page refresh either by javascript or PHP

I am trying to figure out how can I refresh a target page when visited either by a hyperlink or the back button, or even a button. Any ideas ? I have tried almost any solution I could find online and still can make the target page refresh after visited.

Well you can refresh the page using JavaScript with this code:
location.reload();
But if you don't put a condition on it, it'll refresh forever, right?
You'll need to describe your issue in more detail.

if you want to reload page when page full loaded use this JS:
$( document ).ready(function() {
location.reload();
});
if you want timer when page loaded and then reload it use:
$( document ).ready(function() {
// reload after 5 second
setTimeout(function() {
location.reload();
}, 5000);
});
if you want reload only first time use this:
function setCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}
function getCookie(cookieName) {
var theCookie=" "+document.cookie;
var ind=theCookie.indexOf(" "+cookieName+"=");
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(";",ind+1);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}
So, you would tie it together like this:
$(function() {
var skipModal = getCookie('skipModal');
if (!skipModal) { // check and see if a cookie exists indicating we should skip the modal
// show your modal here
setCookie('skipModal', 'true', 365*5); // set a cookie indicating we should skip the modal
}
});
show this link:
Fire jquery script on first page load, and then never again for that user?

Jquery timeout code not re-running after first time user extends session

I wrote a Jquery function that blacks out the screen after a certain amount of inactivity, creates a pop-up that allows the user to click a button to stay logged in, and logs them out (closing the application window) if they do not respond in time.
The environment is ASP.NET (VB). We don't technically use master pages, but we do have a parent page in which our header, footer and nav reside, and my Jquery code is called from that window, loaded via an IFrame.
I've got a function in the child window that reports activity (currently keydown, mousedown and blur) to the parent window, and resets the timer. My code seems to be working fine, except in one scenario. If the user is prompted with the timeout warning, and then they click the button to continue their session, if they take no action on the page (mouseclick, keydown, etc.) then the timeout code is not running a second time.
Here is my main jquery function:
function pop_init() {
// show modal div
$("html").css("overflow", "hidden");
$("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
//$("#popup_overlay").click(popup_remove); // removed to make sure user clicks button to continue session.
$("#popup_overlay").addClass("popup_overlayBG");
$("#popup_overlay").fadeIn("slow");
// build warning box
$("#popup_window").append("<h1>Warning!!!</h1>");
$("#popup_window").append("<p id='popup_message'><center>Your session is about to expire. Please click the button below to continue working without losing your session.</center></p>");
$("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/> Continue Working</button></center></div>");
// attach action to button
$("#continue").click(session_refresh);
// display warning window
popup_position(400, 300);
$("#popup_window").css({ display: "block" }); //for safari using css instead of show
$("#continue").focus();
$("#continue").blur();
// set pop-up timeout
SESSION_ALIVE = false;
window.setTimeout(popup_expired, WARNING_TIME);
}
Here is the code from the parent window:
<script language="javascript" type="text/javascript">
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
//SESSION_ALIVE = true;
timer = window.setTimeout(pop_init, SESSION_TIME);
}
</script>
Here is the code from the child window:
<script type="text/javascript">
$(document).ready(function() {
window.parent.reportChildActivity();
});
</script>
<script type="text/javascript">
$(document).bind("mousedown keydown blur", function() {
window.parent.reportChildActivity();
});
The last script runs in a file (VB.NET ascx file) that builds the header/menu options for every page in our system.
The last line in the pop_init function clearly should be re-starting the timer, but for some reason it doesn't seem to be working.
Thanks for any help and insight you may have.
Forgot to add my code for the session_refresh function:
function session_refresh() {
SESSION_ALIVE = true;
$(".buttons").hide();
$("#popup_message").html("<center><br />Thank you! You may now resume using the system.<br /></center>");
window.setTimeout(popup_remove, 1000);
$("#popup_window").fadeOut("slow", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
}

use this: http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/

You need to restart your timer after the user clicks the button.

Well, I seem to have fixed the problem by changing this:
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
to this:
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
I didn't need to re-declare the reportChildActivity function as I was.