Run Javascript code on Page Load [duplicate] - javascript

This question already has answers here:
Onclick() function on working
(4 answers)
Closed 9 years ago.
I am using the jquery tool bootstrap wizard and there is a function within it to start the wizard that I want to load up automatically when I go to a page.
Here is my code:
$('#open-wizard').click(function (e) {
e.preventDefault();
wizard.show();
});
I need to have this code run whenever I load the page. I know for functions you could just add, not sure how I do this with my code, I tried to put it in a function and didn't work.
window.onload = load();
function load() {
//javascript function here
}

when using window.onload you do not need the perenthesis. change load() to load..
function load() {
//javascript function here
}
window.onload = load;

Yes,and i suggest u put the js import tags at the bottom of the page file.
eg:
<scrpit ...
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

document.ready (jQuery)
$(document).ready(function()
{
// executes when HTML-Document is loaded and DOM is ready
alert("(document).ready was called - document is ready!");
});
document.ready will execute right after the HTML document is loaded property, and the DOM is ready
window.load (Built-in JavaScript)
$(window).load(function()
{
// executes when complete page is fully loaded, including all frames, objects and images
alert("(window).load was called - window is loaded!");
});
The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.

all you need is $(document).ready();
$(document).ready(function () {
wizard.show();
});

Related

multiple $(document).ready and $(window).load in $(document).ready

I got 2 questions. First of all, this is not my work. I'm currently looking at somebody else's JavaScript files. I can't give the exact code but I can show what I'm wondering.
In the JavaScript files I see a lot of $(document).ready(function(){});. I know what $(document).ready does, the callback function will be called when the DOM tree is loaded. Is there any reason why somebody would use more than one $(document).ready callback? I don't get the point.
Also, another thing I saw was a $(window).load inside a $(document).ready, like this:
$(document).ready(function() {
$(window).load(function() {
//...
});
});
From what I know, $(window).load() is called when everything of a page is loaded, like assets and images etc. I would think $(window).load() is the last thing called, after $(document).ready. Is there any time where $(window).load is called BEFORE $(document).ready and is there any reason why you would put a $(window).load inside a $(document).ready?
Yes, jQuery grants that ready event will be called before load. Even in IE8- (where DOMContentLoaded is not supported) it works in that way. But let's look at the following code:
<!doctype html>
<title>Ready vs load test</title>
<style>body {white-space: pre}</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
~function () {
function log(msg) {
document.body.innerHTML += msg + "\n";
}
function handler(msg) {
return function () {
log(msg);
}
}
$(window).load(handler("5. load #1"));
$(document).ready(handler("1. ready #2"));
$(window).load(handler("6. load #3"));
$(document).ready(handler("2. ready #4"));
$(document).ready(function () {
log("3. ready #5");
$(window).load(handler("8. load #6"));
});
$(document).ready(handler("4. ready #7"));
$(window).load(handler("7. load #8"));
}();
</script>
The result is
1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6
Look at lines 7 and 8. The load handled attached from ready event is the last one. So by using this way we can ensure that all previously added (during scripts parsing and exection) load handlers have already been called.
so using $(window).load outside the $(document).ready and inside doesn't change that much from how it'd affect how stuff work?
Actually it can affect script execution. The first version works and the second doesn't:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(window).load(function () {
$.magic.value = 12;
});
});
</script>
<script>
$(window).load(function () {
$.magic = {};
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
});
$(window).load(function () {
$.magic.value = 12;
});
</script>
<script>
$(window).load(function () {
$.magic = {};
});
</script>
$(document).ready kicks in when all nodes of the DOM have been loaded but not necessarily their content, that's what's $(window).load is for, e.g. an img-ele can be present, yet it's content – the image – hasn't been loaded.
So, you're right, use each listener only once and don't nest them.

Passing reference to object javascript function

I have a function that gets called during a control update where 'This' is passed so the function knows what control is updating. I am also calling the function at page load to get initial values but sending document.getElementById() doesn't seem to work. What should I be passing here?
For example:
<script type="text/javascript">
window.onload = function () {
alert("Got to window.onload");
materialSelectionChange(document.getElementById('SquaresDropDownList'));
};
</script>
in the js file...
function materialSelectionChange(obj) {
alert("Got into function");
}
Also, it does fire the js function on change properly
EDIT
The problem seems to be the load time of the JS document. The function wasn't successfully being called at that point because apparently the JS file hadn't finished loading. Likely because of window.onload. It works if I move the function into the page rather than in the JS file. Is there a way I can add delay so I know the page and it's components are fully loaded?
You are not delegating for window load event, you are invoking it, also your missing quotes around the id:
window.onload = myFunction(document.getElementById(typeSelect));
Try wrapping it around:
window.onload = function() {
myFunction(document.getElementById('typeSelect')); //id in quotes
};
EDIT
You must take care of js file import, import must be first before invoking the function within:
<script src='your-script-file.js'></script>
<script type="text/javascript">
window.onload = function () {
materialSelectionChange(document.getElementById('SquaresDropDownList'));
};
</script>
<select id="typeSelect" onchange="myFunction(this)">
window.onload = function(){
myFunction.bind(document.getElementById('typeSelect'));
}
The problem seems to be the load time of the JS document. The function wasn't successfully being called at that point because apparently the JS file hadn't finished loading. It works if I move the function into the page rather than in the JS file. Is there a way I can add delay so I know the page and it's components are fully loaded?

How to execute a function in javascript after an html element is loaded via AJAX without jQuery?

I need to execute a given javascript function after a part of the page is loaded via AJAX. I have no control over how the page loads so trigerring an event from the page is not an option, I suppose I'll need to check the body for the element I need and execute after this element is exists.
I saw that I could do this using jQuery ".on" method, but my jQuery version is from before this feature was introduced so I can't use it. What's the best way to do this using no third-party libraries?
Here's an example using jQuery:
//bind to the body a "load" handler for elements that have class names of "hello"
$('body').on('load','.hello',function(){
alert("Hello is fully loaded, proceed with your program logic");
})
PS: related question that I've read before posting this one. How to bind a function to Element loaded via Ajax
You can create a function to call when the elements are loaded, and another function to check if they are loaded at an interval. Then attach the load checking function to the body's onload attribute. For example:
<body onload="checkLoaded()">
<script type="text/javascript">
var afterLoaded = function() {
// code to execute once elements are in place
console.log("Elements loaded.");
};
var checkLoaded = function() {
var interval = setInterval(function() {
if(document.getElementsByClassName("hello").length) {
clearInterval(interval);
afterLoaded();
}
}, 1000);
};
</script>
Plunker

how to call a javascript method soon after page load [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript that executes after page load
how to call a javascript method as soon as page is loaded.
i have a java script which needs to be called soon after the jsp page is loaded, how to achieve this in javascript.
could any one of you help me pelase.
Regards
You can write a code snippet something like this :-
window.onload(function(){
//Your JavaScript here
});
And if using JQuery then
document.ready(function(){
//Your JavaScript Here
});
Or you can have all your JS after all the HTML.
you can even use a function called :--
document.onload(function(){
//Your code Here
});
Last but not the least you could even try out this
<body onload="YourJSMethod();">
<!-- Some html content -->
</body>
you can try
<body onload="someMethod();">
<!-- Some html content -->
</body>
This will call your method as soon as body tag of your page is loaded.
Alternatively you can make use of jquery's document ready function.
$(document).ready(function() {
// your code
});

How can I tell when all images on a page are loaded using jQuery?

I’m using jQuery for my project. $(function(){...}) fires the function “when the DOM is ready” — this doesn’t say that all images are loaded, right?
Is there an event that gets fired when every image is loaded too?
I guess you mean
http://api.jquery.com/ready/
versus
http://api.jquery.com/load-event/
Example: Run a function when the page is fully loaded including graphics.
$(window).load(function () {
// run code
});
without jQuery:
window.onload=function() {
alert(document.images.length);
}
You can check on load event of image tag. This will get fired when image loading completes.
$("img").load(function(){
// your code
});
window.onload will solve this, I wrote about this there: http://amrelgarhy.com/blog/how-to-tell-when-images-have-loaded/

Categories