window.unload() won't work in jQuery - javascript

I'm trying to alert something out after closing page.
A simple window.unload example as below :
HTML
<html>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="test.js" type="text/javascript">
</html>
test.js
$(window).unload( function () {
alert("Bye now!");
});
P.S :
I have tried javascript too, but doesn't alert anything out !
test.js
window.onunload = function() {
alert("Bye now!");
};

Most browsers prevent alert in unload. The best you can do is to use an onbeforeunload handler that returns a string - the browser will show that string to the user:
window.onbeforeunload = function() {
return "Bye now!";
};
Demo here.

What browser are you testing this code in ?
If you check the following link from W3School, Opera and Chrome do not support it. LINK
And a working example for onbeforeunload is to use jquery as following :
$(window).on('beforeunload', function() {
// Do stuff
});
(I was going to comment this last bit on the above post but I cannot yet comment :'( )

Use body or document instead of window.

Related

How to make Javascript load on pageload

I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});​
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
 

jquery .click() does not work

on my php page I want to click a button on page load.
I have tested it with jQuery and JS.
While jQuery does not work, the JS works fine.
Any idea why this is the case?
jQuery:
<script>
$(document).ready(function() {
$('#button_id').click();
$('#button_id').trigger('click');
});
</script>
JS:
<script>
window.onload = function() {
document.getElementById('button_id').click();
};
</script>
The button I want to click has a data-filter inside. Might this be the problem?
<button id="button_id" data-filter=".parkett" class="sub">Button</button>
EDIT:
No errors in the console, libary is added at the top.
This is my console output if I log both buttons:
Screenshot of console
$("document").ready(function() {
setTimeout(function() {
$("#button_id").trigger('click');
},10);
});
$('#button_id').click();
You have defined no click handler - so nothing going to happen. You need to drop a function in there to use as the callback. Like this:
$( "#button_id" ).click(function() {
$(this).trigger('click');
});
Sounds like you haven't included the jquery script in your head
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

window.onload function doesn't work on Mozilla Firefox

I'm using a loading screen for a webpage and I use window.onload function.
Everything works great except in Mozilla Firefox browsers. When we first visit or refresh the page with ctrl+F5 combination, the loading screen never disappears. if we refresh the page only with F5, then it works.
I use the code below
$(window).load(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
I have also tried the code below but nothing changed.
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}
Why this is happening?
Please help.
Thanks in advance.
The problem is caused by another jquery background plugin which is placed inside $(document).ready()
I moved it inside $(window).load() function, now it works perfect.
I have also moved another function to resize images on the page load. When it was inside $(document).ready() block, sometimes it was malfunctioning if loading time took too long but now it also works great.
function resizeImages(){
//Some Code
}
$(window).load(function(){
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
$.vegas({
src: backURL , fade:0
});
resizeImages();
});
$(document).ready(function(){
//Some Other code
});
I got the same problem when mistyped the type attribute in the script tag:
<script type="text/javascript">
Try This:
$(document).ready(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
Read for load and ready functions difference What is the difference between $(window).load and $(document).ready?
You must call function on initialization like :
window.onload = init();
in other word modify your code to:
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}();// Added
Copy following code in file then open it with firefox
<script>
window.onload = function () {
alert('saeed')
}();
</script>

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

$(window).focus() runs twice for each focus

I'm not sure why this happens and I would love to get an explanation.
Using jquery's focus method I bind to the window focus event.
This is a working example (copy paste into a html file and open in a browser. Doesn't work in jsfiddle or jsbin, for some reason)
<!DOCTYPE html>
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script></head>
<body>
<p1>Here:</p1>
<div id="here" >Why</div>
</body>
<script>
$(window).load(function() {
$(window).focus(function() {console.log("focus");});
$(window).blur(function() {console.log("blur");});
});
</script>
</html>
When the browser regains focus the function runs twice and 'focus` is printed into the console twice.
Any idea why this happens?
The end goal, btw, is to stop a timer from running whenever the user leaves the browser to an app or another tab.
UPDATE
Running on the latest (dev) version of chrome. I'll test it on firefox and write if it's different there.
UPDATE 2
Interesting fact - Doesn't happen on firefox. Maybe its a bug with chrome.
I had this same problem. My fix for this was using lodash's debounce() function (https://lodash.com/docs/#debounce). This was my fix:
var debouncedFocus = _.debounce(() => {
console.log('focussed');
}, 250, {leading: true, trailing: false});
$(window).on('focus', debouncedFocus);
live() has been deprecated. Use on() instead.
$(window).on("focus", function(){ alert("focus!"); });
You could try using the live() function.
$(window).live("focus", function(){ alert("focus!"); });
Maybe load() is called twice? You can register these events without .load(). Try this:
<script>
$(window).focus(function() {console.log("focus");});
$(window).blur(function() {console.log("blur");});
</script>
Which browser ? Seems to run fine for me.
As a precaution, you can use a javascript variable to make it run only once.
<script>
var isFocused = false;
$(window).load(function() {
$(window).focus(function() {
if(isFocused)
return;
console.log("focus");
isFocused = true;
});
$(window).blur(function() {
console.log("blur");
isFocused = false;
});
});
</script>
If you're simultaneously using Underscore, you can use the _.debounce() method to clamp down repeated events to a single event.

Categories

Resources