My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'function and '('
This is what's in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
I am using the brackets editor, where the error is being thrown
Anyone know what the issue might be? Thanks in advance.
Below works fine for me.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
window.alert("Hello Jquery is Working....."); //put whatever you want to do here
});
</script>
</head>
<body>
</body>
</html>
Related
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>
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
I have a very simple page with static JS lib references.
<!DOCTYPE html>
<html>
<head>
<title>some title here</title>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/public.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/publicIE8.css" />
<script src="//SOMESERVER.com/1.0.4614/js/json2.js"></script>
<![endif]-->
<script type="text/javascript">
window.qbaka || (function(a,c){a.__qbaka_eh=a.onerror;a.__qbaka_reports=[];a.onerror=function(){a.__qbaka_reports.push(arguments);if(a.__qbaka_eh)try{a.__qbaka_eh.apply(a,arguments)}catch(b){}};a.onerror.qbaka=1;a.qbaka={report:function(){a.__qbaka_reports...
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/knockout.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/colorbox.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/public.js"></script>
<script type="text/javascript">
var user = {};
user.loggedIn = false;
user.displayName = '';
user.dateFormat = '';
user.timeFormat = '';
// bit more very simple code here
</script>
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
Code works perefectly for me and for QA team. But since I use QBAKA for logging JS errors - I got around 50 errors (different browsers, IPs, timezones, datetimes) that tells me:
Unknown variable or function '$'
in line with
$(document).ready(function () {
I always thought that libraries executes in order of appearance, so if I include reference to jQuery, I am sure that I can access immediately - without any try-catch or other stuff.
How it is possible? jQuery library (from google server) is not available and this JS lib is not loaded and code executes further? Any ideas?
if you using some other custom plugin in your page so it may be conflicts with $ (i.e Jquery)
try $.noConflict()
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
links :
http://api.jquery.com/jquery.noconflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Thanks,
Siva
try this
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
instead of
<script type="text/javascript">
$(document).ready(function () {
//correct code here
}
</script>
you have not call your $(document).ready function properly.
That error can caused by :
Your jquery file is not being properly loaded into your page.
or
<script type="text/javascript">
$(document).ready(function () {
)};
</script>
is executing earlier than jquery file is loaded.
For example try this
<script src="https://c15123524.ssl.cf2.rackcdn.com/jquery.min.js"></script>
instead of
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and check.
Check by view source if the jquery is loading properly or not .
Try to download the jquery file and use it from your local server.
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
Hello I'm looking for someone proficient in Javascript. The site I'm using uses a javascript file to initialize the plugins and load settings and what not. So after reading some of
http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
I decided to use it to snap to my divs(all with the class "slide")...
However placing this
$(window).scrollsnap({
snaps: '.slide',
proximity: 100
});
in my js.js file accomplished nothing
Any help is appreciated!
The code I used with that was this and it worked, give it a try:
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.slide',
proximity: 100
});
});
Not sure about $(window), where did you get that from?
Also, are you linking to the appropriate javascript files and to the jquery library? Make sure to put it at the end of your html like this:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.scrollstop.js"></script>
<script src="js/jquery.scrollsnap.js"></script>
<script src="js/jquery.fitvids.js"></script>
</body>
</html>