I am attempting to check if my Jquery Library is loaded onto my HTML page. I am checking to see if it works, but something is not right. Here is what I have:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/query-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if (jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
});
</script>
This question is related to
javascript
jquery
The answer is
Just a small modification that might actually solve the problem:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
location.reload();
}
}
Instead of $(document).Ready(function() use window.onload = function().
You can check whether it exists and, if it does not exist, load it dynamically.
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
async function load(){
if (!window.jQuery){
await loadScript(`https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js`);
}
console.log(jQuery);
}
load();
You can just type
window.jQuery in Console . If it return a function(e,n) ... Then it is confirmed that the jquery is loaded and working successfully.
CAUTION: Do not use jQuery to test your jQuery
When you are using any of the code provided by other users and if you want to display the message on your window and not on the alert or console.log, Then make sure you use javascript and not jquery.
Not everyone want to use alert or console.log
alert('jquery is working');
console.log('jquery is working');
The code below will fail to display the message
Because we are using jquery inside the else (how the hell the message displays on your screen if you do not have jquery)
if ('undefined' == typeof window.jQuery) {
$('#selector').appendTo('jquery is NOT working');
} else {
$('#selector').appendTo('jquery is working');
}
Use JavaScript instead
if ('undefined' == typeof window.jQuery) {
document.getElementById('selector').innerHTML = "jquery is NOT working";
} else {
document.getElementById('selector').innerHTML = "jquery is working";
}
if ('undefined' == typeof window.jQuery) {
// jQuery not present
} else {
// jQuery present
}
As per this link:
if (typeof jQuery == 'undefined') {
// jQuery IS NOT loaded, do stuff here.
}
there are a few more in comments of the link as well like,
if (typeof jQuery == 'function') {...}
//or
if (typeof $== 'function') {...}
// or
if (jQuery) {
alert("jquery is loaded");
} else {
alert("Not loaded");
}
Hope this covers most of the good ways to get this thing done!!
You can do this fast on the console-tab when inspecting your webpage.
E.g:
$ === jQuery
If it returns true it means it's loaded.
A quick way is to run a jQuery command in the developer console. On any browser hit F12 and try to access any of the element .
$("#sideTab2").css("background-color", "yellow");
If jQuery is loading asynchronously, you can wait till it is defined, checking for it every period of time:
(function() {
var a = setInterval( function() {
if ( typeof window.jQuery === 'undefined' ) {
return;
}
clearInterval( a );
console.log( 'jQuery is loaded' ); // call your function with jQuery instead of this
}, 500 );
})();
This method can be used for any variable, you are waiting to appear.
Source: Stackoverflow.com