Develop Reference

How do I run a jQuery function after jQuery is loaded?

At my website, I am loading jQuery asynchronously.
In order to do that, I must run jQuery functions only after it is really loaded.
I've tried two pure JS ways:
<script src="js/jquery-2.2.2.min.js" async></script>
<script>
window.addEventListener('load', function() {
//stuff
}, true);
</script>
And
window.onload = function() {
//stuff
}
But even so I still get Uncaught TypeError: $(...) is not a function at...
How do I fire jQuery functions after the lib is fully loaded?

You need to add the script only after jQuery library is loaded using script tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// your code should be here
alert(typeof jQuery)
</script>
The document ready handler is using to execute the code only after DOM elements are loaded.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
console.log('Outside document ready handler ' + $('.test').length)
$(document).ready(function() {
console.log('Inside document ready handler ' + $('.test').length)
});
</script>
<div class="test"></div>
UPDATE 1: You can use defer if script is in a file, refer following question: jquery loaded async and ready function not working
UPDATE 2: Or you can bind load event handler to the script tag using addEventListener method.
<script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
document.getElementById('script')
.addEventListener('load', function() {
alert(typeof jQuery)
});
</script>
FYI : I don't know why you are doing this, for optimizing the speed of content load it's always better to move the script tags at the end of body which helps to load content first.

You could do something like this:
function checkVariable(){
if ( window.jQuery){
Do your jquery stuff here
}
else{
window.setTimeout("checkVariable();",100);
}
}
checkVariable();
Apologies for the formatting...stuck on my phone right now.

I did not see this method listed, so I thought I would demonstrate using the JavaScript HTML DOM EventListener.
Example #1 Using the jQuery.ready() Method:
<p id="test-jquery">jQuery Not Loaded</p>
<script>
$(document).ready(function() {
var elem = $('#test-jquery');
elem.text('jQuery Is Loaded');
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This method will not work since jQuery has yet to be loaded.
Running the above example will output:
ERROR: {
"message": "ReferenceError: $ is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 13,
"colno": 3
}
Example #2 Using the addEventListener() Method:
<p id="test-jquery">jQuery Not Loaded</p>
<script>
window.addEventListener('DOMContentLoaded', function() {
var elem = $('#test-jquery');
elem.text('jQuery Is Loaded');
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This method will work since we are listening for the Window DOMContentLoaded event.
From Mozilla:
The original target for this event is the Document that has loaded.
You can listen for this event on the Window interface to handle it in
the capture or bubbling phases. For full details on this event please
see the page on the Document: DOMContentLoaded event.
A different event, load, should be used only to detect a fully-loaded
page. It is a common mistake to use load where DOMContentLoaded would
be more appropriate.

You can use this:
<script>
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
// window loaded, external resources are loaded too...
jQuery(function($) {
// your code here: $("a").css(...)
}
}
});
</script>
I used it when inline jQuery script did not work on safari (Mac and iOS) and this solved the problem.

Use document.ready or load the library in the header. That should work.. Be sure to load in the right folder or in the right link. If you are usying a link to load jquery then be sure to have an internet connection

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.

According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>

Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals

you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

JavaScript in the head tag

I have a html file which looks like this.
<head>
<script>
document.onready
{
document.getElementById("demo").innerHTML="Works";
}
</script>
</head>
<body>
<div id="demo">
</div>
</body>
When I put the script tags at the bottom of the page, everything works fine. But when I put the script in <head></head tag, it does not work. I guess it is not able to access elements that are below the script.
On many sites like StackOverflow, JavaScript is in head tag. How is it then able to access HTML elements that are below it?
What should I do now? Should I just move my script to the bottom or is there a way by which JavaScript can access elements below it?

Try using something like this:
window.addEventListener('load', function() { document.getElementById("demo").innerHTML="Works"; }, false);

Where did you get document.onready from? That would never work.
To ensure the page is loaded, you could use window.onload;
window.onload = function () {
document.getElementById("demo").innerHTML="Works";
}

Your syntax is incorrect.
document.ready= function () {
//code to run when page loaded
}
window.onload = function () {
//code to run when page AND images loaded
}

Loading an external script after page load with jQuery

I'm a little confused how to do this, basically I have a page that has a Facebook Share button inserted via JavaScript:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
The problem is that it's blocking the page load at that part, how can I insert this tag after page load and still have the script execute? I'll like to do it in an unobtrusive way, ideas?

Use the jQuery getScript command inside $(document).ready. This will download the script after the page has loaded. Example:
$(document).ready(function() {
$.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share", function() {
alert("Script loaded and executed.");
});
});

You could use the jquery.getScripts to load it asynchronously.

Try something like this:
$(document).ready(function() {
var script = document.createElement( 'script' );
script.src = "http://static.ak.fbcdn.net/connect.php/js/FB.Share";
script.onload=optionallyDoSomethingWithTheScriptYouJustLoaded();//not needed
var headID = document.getElementsByTagName("head")[0];
headID.appendChild(script);
});

Inject the script tag into the dom as a callback of the document ready event.

you could do something like:
$(function() {
$.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share', function() {
//do nothing here
});
});

javascript: how to check all code of an html page is loaded

the program needs invoke a function after all code, including HTML, javascript, CSS, etc., is loaded? Can javascript do it?

for JavaScript
window.onload = function(){
//your code
};
for JQuery
$(document).ready(function(){
//your code
});

window.onload will fire after all images, frames and objects have finished loading on the page. Your question isn't clear enough on whether or not you want the script to wait for those, but if you don't then you need a "document ready" solution.
Firstly, many (all?) DOM-based Javascript frameworks provide this functionality, cross browser in the form of an event. jQuery example:
$(document).ready(function() {
alert("DOM is ready");
});
If you want to do it without the framework, it gets a little more awkward. Most browsers (coughnotIE) provide a DOMContentLoaded event:
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
alert("DOM is ready");
}, false);
}
For IE's part, the defer attribute on a script tag will do the job. You can use conditional comments to make sure only IE parses the script:
<!--[if IE]
<script type="text/javascript" defer>
alert("DOM is ready");
</script>
<![endif]-->

If you're using the jQuery library, you simply do this:
$(document).ready(function() {
// The code you need to have executed after loading the page
});

window.onload = function() {
// Your code here
};
What have you tried?

You can use <body onload="doStuff()">, or you can use window.onload in your script. Check this out.

The jQuery $(document).ready(...) method is triggered when the dom is loaded and can be manipulated and before all scripts, images, etc. are loaded.
The window.onload event will fire when everything that has been requested has completed loading.