We Keep Coding

Dynamically load jquery in plain javascript

I am taking a page that does not have jquery referenced in the dom. I need to use some of the jquery functionality, so i figured the best bet is to inject jquery into the existing dom. I got the function idea from Load jQuery with Javascript and use jQuery and How to include jQuery dynamically in any website using pure javascript ....none of these solutions seem to work for me. I am still getting an error not recognizing the jquery selector.
(function() {
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState
|| this.readyState == 'loaded'
|| this.readyState == 'complete')) {
done = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js',function() {
// Yay jQuery is ready \o/
});
cards = $('div:first');
$('body').empty().append(cards);
// Delete first and second child divs
first = $('div:first div:first');
$('div:first div:first').css('position', '').css('left', '').css('z-index', '').css('height', '250px').remove();
second = $('div:first div:first');
$('div:first div:first').css('position', 'relative').css('left', '').css('z-index', '').remove();
$('body').empty().append(first).append(second);
})();

You're supposed to move your own code into the callback, to where it says // Yay.... Only then is your code run after jQuery was loaded.
getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js', function() {
// Yay jQuery is ready \o/
$('body').empty().append($('div:first'));
// Delete first and second child divs
for (var i = 0; i < 2; i++) {
$('div:first div:first').remove();
}
});

Error:Bootstrap's JavaScript requires jQuery

So i am working on a simple javascript widget and i started up by followinf this tutorial. I am loading jquery dynamically like below:
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '2.1.4') {
UPDATE, Here is how i'm loading jQuery
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js");
document.documentElement).appendChild(script_tag);
//Once loaded load other javascripts
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
}
Following is my scriptLoadHandler function:
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
Now, in the main method i'm trying to load Bootstrap js like this:
function main() {
console.log("undefined" == typeof jQuery);
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js";
head.appendChild(js);
}
But it's still giving me above error even though the order in which they load is correct and when i check console log it gives me false which means jQuery is defined.

Check if JQuery is loaded before of bootstrap loading request. If JQuery is not already loaded bootstrap can not be loaded

//Load jquery here
You're not loading jQuery there.
You should either create a SCRIPT element in the DOM before this script with src your jQuery lib location, or load it dynamically after the line I've quoted (i.e. create the script tag, set the src to your jquery lib relative or absolute URL/URI, add the onloaded event handler to execute scriptLoadHandler and eventually append the new script to the DOM)
Easiest way is to load the script via a script TAG BEFORE the script you're using.
EDIT: after more information by OP, here is the solution:
check for the version of jQuery: if it's not the one you want, load it.
After you've loaded the jQuery version you need (or if it's already loaded), load Bootstrap.
JSFiddle: http://jsfiddle.net/1h6emjwu/2/
function loadScript(src, callback) {
var js = document.createElement('script');
js.src = src;
js.type = 'text/javascript';
if (typeof callback === 'function') {
js.addEventListener('load', callback);
}
document.body.appendChild(js);
}
var myScript = function () {
//alert(window.jQuery.fn.jquery);
alert($.fn.modal ? 'Bootstrap loaded' : 'Bootstrap not loaded');
}
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '2.1.4') {
window.oldJQuery = window.jQuery; // so that you can return back whenever you want
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', function () {
loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', myScript);
});
} else {
loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', myScript);
}

Load jquery dynamically before using jquery

My script will be using as widget in third-party website so i don't aware about jquery loaded and which version of jquery loaded or not at third-party end.
So Before loading below script i want to check is there already latest jquery 1.11.1 loaded after dom ready if not then i want to load the jquery latest and run below script.
script.js
var $ = jQuery.noConflict( true );
(function( $ ) {
$(document).ready(function() {
alert("Document Ready ");
});
})($jy);
EDIT 1
var addNewJQuery = function() {
(function( $ ) {
$jy = $;
var invokeOriginalScript;
$(document).ready(function() {
......my code here.....
}):
})(jQuery);
}

Not sure if this is working for you, but it looks like it is working.
Maybe you need to remove the other script from your header after you loaded the second jQuery file. But it seems to work with both scripts loaded.
I've also added a check if jQuery is loaded at all, if not it will load jQuery.
You can also find the same code in this fiddle.
var addNewJQuery = function() {
//var jQ = jQuery.noConflict(true);
(function ($) {
$(document).ready(function () {
alert("You are now running jQuery version: " + $.fn.jquery);
});
})(jQuery);
};
if ( typeof jQuery === 'undefined' ) {
alert('no jQuery loaded');
//throw new Error("Something went badly wrong!"); // now you could load jQuery
loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}
if ($.fn.jquery !== '1.11.2') {
console.log('detected other jQuery version: ', $.fn.jquery);
loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Unable to load jQuery UI dynamically - Uncaught TypeError: Cannot read property 'ui' of undefined

I load my jQuery and jQuery UI files dynamically. The jQuery file loads successfully but when the jQuery UI file loads an error occurs
The following is what is shown in the console : Uncaught TypeError: Cannot read property 'ui' of undefined
My code is given below
(function()
{
var jQuery;
if (window.jQuery === undefined)
{
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"//code.jquery.com/jquery-1.11.0.min.js");
if (script_tag.readyState)
{
script_tag.onreadystatechange = function()
{
if (this.readyState === 'complete' || this.readyState === 'loaded')
{
scriptLoadHandler();
}
};
}
else
{
script_tag.onload = scriptLoadHandler;
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else
{
jQuery = window.jQuery;
main();
}
function scriptLoadHandler()
{
jQuery = window.jQuery.noConflict(true);
main();
}
function main() {
jQuery(document).ready(function($) {
jQuery.getScript('http://code.jquery.com/ui/1.11.1/jquery-ui.min.js', function() {
jQuery.noConflict(true);
});
};
})();
Can someone help me with this?

Simply remove the true from your noConflict call; this relinquishes control over $ but leaves jQuery around for jQuery UI to use:
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ to its previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(); // no argument!
// Call our main function
main();
}

Use :
$(document).ready(function() {});
or
$(function() {});
The two statements are actually the exact same. So the second call is just a shortcut for the first.
The $ notation is again only a shortcut for jQuery. If you have loaded jQuery into your website you can use both.
(function($){
}(jQuery));
Here You're calling that anonymous function (which has $ as parameter) and pass the jQuery object in.

How can I load jQuery if it is not already loaded?

I have a initializor.js that contains the following:
if(typeof jQuery=='undefined')
{
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'jquery.js';
headTag.appendChild(jqTag);
}
I am then including that file somewhere on another page. The code checks if jQuery is loaded, and if it isn't, adds it to the Head tag.
However, jQuery is not initializing, because in my main document, I have a few events declared just to test this. I also tried writing some jQuery code below the check, and Firebug said:
"jQuery is undefined".
Is there a way to do this? Firebug shows the jquery inclusion tag within the head tag!
Also, can I dynamically add code into the $(document).ready() event? Or wouldn't it be necessary just to add some Click events to a few elements?

jQuery is not available immediately as you are loading it asynchronously (by appending it to the <head>). You would have to add an onload listener to the script (jqTag) to detect when it loads and then run your code.
e.g.
function myJQueryCode() {
//Do stuff with jQuery
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'jquery.js';
jqTag.onload = myJQueryCode;
headTag.appendChild(jqTag);
} else {
myJQueryCode();
}

To include jQuery you should use this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js">\x3C/script>')</script>
it uses the Google CDN but provides a fallback an has a protocol relative URL.
Note: Be sure to change the version number to the latest version
if window.jQuery is defined, it will not continue to read the line since it is an or that already contains a true value, if not it wil (document.)write the value
see: theHTML5Boilerplate
also: you forgot the quotes, if jQuery is not defined:
typeof window.jQuery === "undefined" //true
typeof window.jQuery == undefined //false ,this is wrong
you could also:
window.jQuery === undefined //true

If you're in an async function, you could use await like this:
if(!window.jQuery){
let script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
}
/* Your jQuery code here */
If you're not, you can use (async function(){/*all the code*/})() to wrap and run all the code inside one
.
Alternatively, refactoring Adam Heath's answer (this is more readable IMO). Bottom line, you need to run the jQuery code AFTER jQuery finished loading.
jQueryCode = function(){
// your jQuery code
}
if(window.jQuery) jQueryCode();
else{
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = jQueryCode;
}
Or you could also wrap it in a function to change the order of the code
function runWithJQuery(jQueryCode){
if(window.jQuery) jQueryCode();
else{
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = jQueryCode;
}
}
runWithJQuery(function jQueryCode(){
// your jQuery code
})

The YepNope loader can be used to conditionally load scripts, has quite a nice, easy to read syntax, they have an example of just this on their website.
You can get it from their website.
Example taken from their website:
yepnope([{
load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}

This site code is solved my problem.
function loadjQuery(url, success){
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
head.appendChild(script);
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
}
if (typeof jQuery == 'undefined'){
loadjQuery('http://code.jquery.com/jquery-1.10.2.min.js', function() {
// Write your jQuery Code
});
} else {
// jQuery was already loaded
// Write your jQuery Code
}
http://99webtools.com/blog/load-jquery-if-not-already-loaded/

This is old post but I create one workable solution tested on various places.
Here is the code.
<script type="text/javascript">
(function(url, position, callback){
// default values
url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
position = position || 0;
// Check is jQuery exists
if (!window.jQuery) {
// Initialize <head>
var head = document.getElementsByTagName('head')[0];
// Create <script> element
var script = document.createElement("script");
// Append URL
script.src = url;
// Append type
script.type = 'text/javascript';
// Append script to <head>
head.appendChild(script);
// Move script on proper position
head.insertBefore(script,head.childNodes[position]);
script.onload = function(){
if(typeof callback == 'function') {
callback(jQuery);
}
};
} else {
if(typeof callback == 'function') {
callback(jQuery);
}
}
}('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){
console.log($);
}));
</script>
Explanation you can find HERE.