I can't figure out what is wrong with my code here. I am trying to load jQuery dynamically if it is not present on the page.
<head>
<script>
(function() {
if (typeof jQuery != 'undefined') {
/* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */
if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) {
loadJQ();
}
} else {
loadJQ();
}
function loadJQ() {
/* adds a link to jQuery to the head, instead of inline, so it validates */
var headElement = document.getElementsByTagName("head")[0];
linkElement=document.createElement("script");
linkElement.src=".7.1/jquery.min.js";
linkElement.type="text/javascript";
headElement.appendChild(linkElement);
//alert(headElement);
}
})();
</script>
</head>
This is my body.
<body>
<button>Click me</button>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
$("button").click(function(){
$(this).hide();
});
});
</script>
</body>
When I put this in a html page I get an error saying that "$ is not defined". Anyone has any idea why?
I can't figure out what is wrong with my code here. I am trying to load jQuery dynamically if it is not present on the page.
<head>
<script>
(function() {
if (typeof jQuery != 'undefined') {
/* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */
if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) {
loadJQ();
}
} else {
loadJQ();
}
function loadJQ() {
/* adds a link to jQuery to the head, instead of inline, so it validates */
var headElement = document.getElementsByTagName("head")[0];
linkElement=document.createElement("script");
linkElement.src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js";
linkElement.type="text/javascript";
headElement.appendChild(linkElement);
//alert(headElement);
}
})();
</script>
</head>
This is my body.
<body>
<button>Click me</button>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
$("button").click(function(){
$(this).hide();
});
});
</script>
</body>
When I put this in a html page I get an error saying that "$ is not defined". Anyone has any idea why?
Share asked Jan 6, 2012 at 19:48 N VN V 832 silver badges5 bronze badges 2-
Because jQuery hasn't loaded by the time the
<script>in the<body>is reached. Why are you trying to do this? – Brigand Commented Jan 6, 2012 at 19:53 - The reason I want to do this to clean up my site. There 150 pages and most of them are using different jQuery version on my site. Some pages don't have jQuery. Before I include this in my header and push it site wide, I don't want to cause any error by using multiple version of jQuery on a page and causing unexpected results. – N V Commented Jan 6, 2012 at 20:01
3 Answers
Reset to default 3"$ is not defined" error means that jquery is not loaded.
Try this script to load the jquery.
http://css-tricks./snippets/jquery/load-jquery-only-if-not-present/
"$ is not defined" error results from jQuery code not being downloaded by the time the script tries to execute.
You can try using the Script attribute defer to delay the execution of your code until it is loaded by changing the script tag to
<script type="text/javascript" defer="defer">
With help of one my friend, found what is the problem with above code.
When the document.ready runs, jquery is not on the page (there are two onReady elements running)… and since the addToHead version is non-blocking, the rest of the javascript executes in parallel and fails.
I added this just after the body tag starts and it works fine:
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write('<scr'+'ipt type="text/javascript" src="http://ajax.googleapis. /ajax/libs/jquery/1.7.1/jquery.min.js">'+'</scr'+'ipt>');
}
</script>