Develop Reference

Javascript behavior between 2 different functions that I don't understand

I'm a Java developer not well-versed in front-end technologies, so I hope this question isn't too dumb. I have 2 scripts inline on an html page.
<script type="text/javascript">
function printReceipt(orderId,email) {
var printWindowSettings;
var browserUserAgent = navigator.userAgent;
if (browserUserAgent.indexOf("Chrome") > -1) {
printWindowSettings = "status=0,toolbar=0,menubar=0,height=500,width=1000,scrollbars=1";
} else {
printWindowSettings = "status=0,toolbar=0,location=0,menubar=0,height=500,width=1000,scrollbars=1,noopener=1";
}
var path = "/shop/printReceipt?orderid="+orderId;
if (email!=null)
path+="&email=" + email;
var docPrint = window.open(path, '_blank', printWindowSettings);
if (docPrint == null) console.log("window open returned null");
}
</script>
<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
window.history.back=function(){
console.log("Back Button Pressed.")
document.location='/shop/shoppingCart.seam';
}
}
</script>
printReceipt() is invoked in the onClick() handler of an anchor tag.
<div class="pull-left" style="padding-bottom:20px;"><i class="fa fa-print" aria-hidden="true" style="padding-right:6px;"></i>Print Receipt</div>
What I'm finding is that when printReceipt() is invoked, the following script (to manage the back button) gets invoked also. So when printReceipt() is called, my browser navigates to /shop/shoppingCart.seam.
Why would this be? How do I get around this?

I made a bit of research about your issue, and since you mention that you are using a third party script (which is not always the best for a developer), I found something that may help you get rid of it.
This method will need you to delete the third party script you already have (or comment it). Since we are going to handle the back button in a different way.
In the script tag where you had the following code:
bajb_backdetect.OnBack = function() {
window.history.back = function() {
console.log("Back Button Pressed.")
document.location = '/shop/shoppingCart.seam';
}
}
Replace it with this code:
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/history");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/history") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("/shop/shoppingCart.seam"); //Here goes your URL
},0);
}
}, false);
}(window, location));
And now, if you did remove the third party script (or commented it), you should be able to see the expected behavior.
If you want to see more about this, there is a question similar to this that has been already answered saying the best approach for handling the window back event is doing it by yourself.
I took this information from this answer, just complemented it with the explanation and code for your specific issue. Hope it helps.
Note: If it still not working, you will need to provide a more open context of your code, since there might be something else causing it to not work.

Probably the anchor being clicked causes the browser to follow the link.
Given this:
click me
Clicking that link will run the function and then the page will reload. Your back detection script will notice that the page is being unloaded and do stuff (apparently).
Change it to:
click me
To prevent the link from being followed.

create custom event in javascript and trigger it

Here is my problem,i have one google ad that expand on click and return when hit close button..but according to changed conditions what i want is to show expand first and close automatically after certain time and when ever it expanded it should close after certain time..i have done this with jquery but it is refreshing the page for the first time can anyone one help..add is made by using google web designer
here is my jquery code i am sure it wont refresh page abut again it is doing it that's why I was thinking of making custom javascript event and trigger it (core javascript)
<script>
var $j = jQuery.noConflict();
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000);
// above function to clpse it first time after 10 second
(function(){
$j('.banner').click(function(){
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if(!cl_chk){
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000)
}
})
})()
//this function is for closeing that expando ad after its expanded
</script>
here is the url demo:
demo link asian paints ad

dont know if this can help
jQuery.noConflict() // no need to declare a global variable for jQuery ...
(function ($j) { // ... cause you can pass it here
// i like to declare things once and for all....
var closeAfter10 = function () {
setTimeout(function clo() {
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
}, 10000);
}
//this will attach the event and start the countdown when all contents on the page are loaded
$j(window).load(function() {
$j('.banner').click(function () {
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if (!cl_chk) {
closeAfter10(); // ... so i can use them this way ...
}
});
closeAfter10(); // ... here another use of that thing
);
})(jQuery);

javascript reload combined with scroll

I have the following javascript function; it works fine when I use the reload alone and works fine when I use the scroll alone; but it will not scroll when I combine the two together; I tried to change the sequence, but did not help;
function myFunction() {
window.open("http://www.example.com");
location.reload(true);
window.scrollBy(0,1000);
}
Thanks in advance for the help.

You can set hash to somehash and then reload the page. After that, in your body onload, check the hash and if hash is somehash, scroll the page.
function myFunction() {
window.open("http://www.example.com");
location.hash = 'somehash';
location.reload(true);
}
Add the following function to your page onload event handler.
function scrollOnload() {
if (location.hash == 'somehash') {
window.scrollBy(0,1000);
}
}

If you want to make browser do something after reload, you need to keep the flag somewhere. Here is an example using sessionStorage:
function myFunction() {
window.open("http://www.example.com");
sessionStorage.setItem('scroll', true);
location.reload(true);
}
document.body.addEventListener('load', function () {
if (sessionStorage.getItem('scroll')) {
window.scrollBy(0, 1000);
sessionStorage.removeItem('scroll');
}
});

Call a function only once

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!

You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);

Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};

Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.

this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});

How do I write my script for each link I want to redirect

So I'm trying to redirect users from html links and element id tags, to other pages with javascript. I've figured out how to do one singular redirect but having trouble writing the code for multiple links heres what I have so far:
HTML:
<head>
<script type = "text/javascript" src="script2.js"></script>
</head>
<body>
NickName
Salestax
W 3 Schools
</body>
</html>
My external script so far for just one link:
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
confirm("Go to Salestax page?");
window.location="salestax.html";
return false;
{
Do I just crank out more functions and change the location value, getElementById value and the onclick value?

A nice thing about onclick events is that if you return false it'll stop the browser from going to the link defined in the HREF. If you return true it'll keep going through with the navigation. You don't need to worry about the window.location in your function if you use this method, which will simplify things a lot. So you can just do:
Salestax
I'll prompt them if they want to continue. They click yes it'll keep going as if they clicked the link normally, they click no it'll stop them from navigating away. This way you don't have to duplicate the link's HREF in both your HTML and javascript.
You could still dynamically bind this, but if you're doing it by ID I don't really see any advantage vs just defining the onclick in the HTML.

First off, unless you're trying to prevent a user from losing changes that they've made on the current page, it's not clear why you would want to create this functionality. But at any rate, here's a standard/basic approach:
window.onload = function() {
document.getElementById("redirect").onclick = redirectConfirmation("Go to Salestax page?");
document.getElementById("redirect1").onclick = redirectConfirmation("Go to Nickname?");
};
redirectConfirmation = function(msg, urlOverride) {
return function() {
if ( confirm(msg) ) {
window.location = urlOverride || this.href || "#"
}
return false;
};
};
redirectConfirmation optionally takes a second parameter which can be used to explicitly set the url that the page is redirected to; otherwise, it will default to the URL specified by the href attribute of the anchor tag being acted upon (and if all else fails, it will fail gracefully with "#").
If you're using a common library, like jQuery, you can simplify your event registration as follows:
$(function() {
$("#redirect").click( redirectConfirmation("Go to Salestax page?") );
$("#redirect1").click( redirectConfirmation("Go to Nickname?") );
});

A far better approach would be to do something like the below - that way the logic for redirecting the user stays reasonably close to the link, and so people looking at the source wont become incredibly confused when the page takes people elsewhere.
Some link
External script:
function initRedirect(message, url)
{
confirm(message);
window.location = url;
return false;
}