Load my Javascript after jQuery - javascript

I'm new to this, but I did a lot of searching and couldn't find an answer about why my script wasn't loading after jQuery. I was receiving an error:
$ is not defined
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).show();
}, function() {
$('ul', this).hide();
});
});
</script>

try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hello"); //your script here
});
</script>

Loading JavaScript is Synchronous by default unless you tell the browser to handle it in a different way.
Based on that, placing your script after including jQuery will ensure your script executed after jQuery is available
So for your code to work, do something like:
console.log('$ is ', typeof $)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Related

I was writing simple code in JQuery in brackets but '$' shows undefined

I tried everything mentioned in this forum, Tried newer versions of jQuery Checked every spelling spent two hours to find out the problem but got no result.
Move Jquery to the <head>. If not, you could try
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
This will make sure your Global jQuery variable is bound to the "$".
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello World</h1>
You could also load the script externally. I often find this to work better with jQuery.
You need to include jQuery before using it. Move the <script> tags that defined after footer into <head> before script that you try to run.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
});
});
</script>
</head>
<body>
<h1>Click Me</h1>
</body>
Check if your file is REALLY loaded
Add a new file, and only import jQuery from googleapi. Then, go to your browser's developer tools (F12), abd in console try to execure '$'. If it's not throwing an error, go to 4. If it is throwing an error, go to 3.
Check your internet connection to googleapi: Open the jQuery file in your browser, and check if it is loaded properly.
Try add 'refer' to your script tag like this:
If error still occurs, feel free to comment below.
Insert your script file/code just below the jQuery library file link
<h1>Heading</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('h1').click(function() {
jQuery(this).css('background-color', '#ff0000')
})
})
</script>
It happened because jQuery is not properly installed to be sure before coding run the code below. If it gives you alert message "jQuery is installed correctly" you are good to go.
<head>
<title>JQuery</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
alert("jQuery is not installed ")
}else {
alert("jQuery is installed correctly")
}
</script>
</body>

externally loaded javascript won't execute

I'm having trouble running javascript from an external file. Here's where it's included in the html:
<div id="article-author-list" class="article-author-list">
<#list authorGroups as authorGroupItem>
<#authorGroup item=authorGroupItem/>
</#list>
<script type="text/javascript">alert('Hello??');</script>
<script type="text/javascript" src="/js/article/truncateAuthors.js"> </script>
</div>
Whereas here's truncateAuthors.js:
alert('Found the script!!!');
$(window).load(function () {
alert('Found the script.');
});
$(document).ready(function () {
alert('Document is ready');
});
$(function(){
alert('Running the script');
});
When the html is loaded, the only alert is 'Hello??' from the inline script. How can I get the external file to execute?
Before call your javascript please add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
to your file it will work fine. this is jquery library file that we have to use when we are writting code in jquery
I found it! The project was using requireJS and I needed to add it to the declaration. Thanks for all your answers :)

Jquery.min.js local copy not calling window load function

I am using jquery for focus of tabs. When i used :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in my jsp then the window.load function works good, but when i downloaded jquery.min.js and added in js folder.
<script type="text/javascript" src="jquery.min.js"></script> like this.
Now window.load function is not working.
<script type="text/javascript">
$(window).load(function() {
alert('Hello');
if($("#updatetemp").val()=="TRUE"){
$("#update_link").click();}
});
</script>
I found out the way to use JQuery locally..
jQuery(window).bind("load", function($) {
var msgtemp= jQuery("#updatetemp").val();
if(msgtemp=="TRUE"){
jQuery("#update_link").click(function() {
}).click();
}
});
Instead if $ symbol i just used jQuery attribute and it worked.

Jquery library not loaded

I'm using XSLT as my view layer and i want to include Jquery in my page so i did the following but with no mean the library still not working:
<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
alert("_______");
$(document).ready() {
alert("Jquery is working");
});
</script>
Note: the jquery-1.4.2.min.js file is in the same folder where my XSL file exist,
the strange thing i note is that the alert at the first line in the script is not working which means that the javascript at all is not working!! i tried that at chrome,firefox and IE with the same result.
try it like this
$(document).ready(function(){
alert("Jquery is working");
});
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
alert("_______");
$(document).ready(function () {
alert("Jquery is working");
});
</script>
WORKING DEMO
Try This:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> //  remove this content
<script type="text/javascript">
alert("_______");
$(document).ready(function() {
alert("Jquery is working");
});
</script>
I found a solution here: https://raygun.com/blog/jquery-is-undefined/. I added this code <script>window.jQuery || document.write('<script src="path/to/your/jquery_file.js"><\/script>')</script> below before the </body> tag and succeeded in removing the "jQuery is not loaded / found" warning

jQuery Not Working, "Zentabs" conflict?

I'm using a jQuery plugin(?)/library called "Zentabs" and for some reason it's preventing any other jQuery code I write from working...this isn't the first time I've had trouble with jQuery library's breaking other pieces of code but usually I can rearange where the code appears and that'll usually fix whatever the problem is but this time nothing's working -_-
This is what I've got in the header;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
<script src="<?php baseURL();?>/date_time.js" type="text/javascript"></script>
<script src="jquery.lazyload.js?v=4" type="text/javascript" charset="utf-8"></script>
When I remove
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
Then
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
Work just fine, but when I include zentabs.js, nothing works =/
And here's the zentabs.js file > http://zenverse.net/wp-content/uploads/2009/09/zentabs.js
Can anybody tell me what I'm doing wrong?
P.S. I'm so freakin' frustrated right now I'm about ready to jump off
a building -_-
You need noConflict there. Try this, then from then forward just use jQuery instead of $()
$.noConflict();
jQuery(document).ready(function() {
alert("WTF!!!!!");
});
You could also set jQuery to a variable if you want, so its a bit shorter to type on all your calls later.
var jq = jQuery;
jq(document).ready(function() {
alert("WTF!!!!!");
jq('input').val( '...' );
});
Read more about noConflict on http://api.jquery.com/jQuery.noConflict/
try this if this solves:
$(document).ready(function() {
$.noConflict();
alert("WTF!!!!!");
});
your can find documentation here: http://api.jquery.com/jQuery.noConflict/

Categories

Resources