I'm trying to import jQuery, but for some reason, it's not letting me, and it's giving me the following error:
[10:16:02.965] ReferenceError: jQuery is not defined # http://127.0.0.1:8020/project/js/jquery-191.js:338
I don't have any javascript that occurs before I import jQuery, which seems to be the reason most people get the "reference error". Here's my code under the<head> tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home | Howard University Astronomy</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!--get javascript -->
<script src="js/jquery-191.js"></script>
Thanks for your help.
EDIT: can someone explain why I'm getting downvoted for a legitimate question that I'm providing all the documentation for, answering all the questions presented to, and that hasn't been answered by a previous question?
I see that you have said you dont want to rely on an external server which is a good idea at its core but doesn't take advantage of the fact that most people have jquery cached in their browsers through the most popular CDN.
There is an extra trick you can do which is to use a fallback copy if the CDN fails:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">\x3C/script>')</script>
http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
(Note: I changed the MS hosted snippet Scott provided to Google because of this post)
As to your actual problem it seems like you might have got a dodgy copy of the jquery.js file as its not a standard naming pattern i've seen before so wondering if its been messed up somehow.
Try replacing your script link with this:
<script src="js/jquery-191.js" type="text/javascript" charset="utf-8"></script>
Related
I'm trying to run the following code, written on my local machine:
http://www.jsfiddle.net/WShdx/3/
Functionality-wise (ignore the broken images in the previous and next buttons, and the wrongly-sized main images) the click/hover function is working properly in jsfiddle. However, on my local machine it's not working at all.
For all intents and purposes the code is identical, except the local copy has this head section to load in the javascript/css files that are contained within the jsfiddle page:
<head>
<title>Jquery Wizard</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="wizard.js" type="text/javascript" ></script>
</head>
Is there some wonderful function of jsFiddle that is making my code magically work, or am I missing something here?
You chose to run the script-code "onload" on jsFiddle, that's the difference.
Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.
I'd also advice anyone who run into such errors to use firebug or any debugging tool debug the script whenever such problems occur. Might be very simple yet frustrating problems like an Uncaught SyntaxError: Unexpected token ILLEGAL error. Debuggers come in very handy!
I want to get startet with dojo.
Therefore I am useing their tutorials: http://dojotoolkit.org/documentation/tutorials/1.8/hello_dojo/
The simplest tutorial displays this page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
I now open the page (tried both localy and hosted version on their page).
And when I write
dojo.query("h1")
in my firebug console I get the message:
ReferenceError: dojo is not defined
Please help
This question is lacking a correct answer. The reason this is not working is because you enabled async mode. What this actually does is that the Dojo core will be loaded asynchronously.
The Dojo core is the part of Dojo that is loaded automatically when you load the dojo.js file. It sets a global variable called dojo which contains basic functionality like the dojo.query part.
Your problem is that you're actually not waiting for the core to load. Because the core is not loaded, dojo will be undefined, giving you that error.
You should only use async mode when using the AMD loader (require()), if you don't want to use it (legacy mode), you just put async to false. But this mode is actually deprecated and will be removed in Dojo 2.0.
The other solution is to use the AMD loader (asynchronous module loader), the proper syntax to this is:
require([ "dojo/query" ], function(query) {
query("h1");
});
In this example you might have the chance that the DOM is not loaded yet, so the best answer is to wait for the DOM to load as well, resulting in:
require([ "dojo/query", "dojo/domReady!" ], function(query) {
query("h1");
});
You're indicating that it's working when you use the protocol implied URL. However, this is not true. The only reason why it suddenly is working is because you left the async property away, which defaults to false.
Unlike Christofer said, the legacy mode is still available, but it's deprecated.
Agnes' answer will work because because it's using the AMD loader. However, combining legacy code and the new syntax doesn't look well. If you're choosing for AMD you should put everything in AMD and not only certain parts.
Having no previous experience of Dojo, I read through a bit of the documentation. Especially this part, talking about the "Modern Dojo".
It turns out, as of version 1.7, you can no longer just load dojo.js and expect to call dojo.something. With the "new Dojo", that is no longer possible. This is why you get dojo is not defined.
For more info, read through the updated documentation on how to get started, but here is a simple hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" href="../../../resources/style/demo.css">
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
</script>
</body>
</html>
If you like to use the old way, I guess you could reference a version of Dojo prior to 1.7, but using a legacy version is rarely a good way forward, so I recommend that you learn the new way of doing things instead.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo- config="async: true"></script>
</head>
<body>
<script>
require(["dojo"], function(dojo){
dojo.ready(function(){
//Your code here
});
});
</script>
</body>
</html>
are your sure your source for dojo is in "//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" because your folder structure look like in googleapis folder which is "http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?
I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.
At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.
Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.
This is the weirdest thing. When I moved what little working code I had from my development setup to some kind of test server (and believe me when I tell you that that was painfull), I realized that all of my Javascript functionality wasn't working. After doing a little investigation (fiddler2), I found that I am getting a 404 error when loading my scripts. Well when I look in the directory where the code says they are located, I am ABLE to find them. In other words, they are where they said they were. What in sam hill is going on here? Could it possible be how I have my IIS server set up? I looked in the Handler mappings for my website (one of several websites on this server under the sites\default web site node) in IIS I noticed that .js is not even found in there. Would that have anything to do with it? If that is way off base, have you ever experienced anything like this? How can I go about solving this issue?
Thanks for your help.
EDIT: Examples of how I call my scripts
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/dataTable.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jqUIcss/jquery-ui-1.8.14.custom.css" />
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqUI/jquery-ui-1.8.14.custom.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
EDIT 2
Just checked and my application pool inside of IIS 7 is set to integrated. So that probably isn't it.
My thought about your problem.
Did you drag and drop the file name into view? (this will fill path relative to file to your js file)
this is happening often if you have areas.
step 1
check that file name is in correct location and you have the correct name.
step 2
check whether you can access file from url link on the location you know to be sitting in
step 3
validate your request via firebug or something else that will show you request for the file.
step 4
is the file / folder accessible via your application / do you have access rights to the location
if this fails i would presume there is something wrong with IIS or settings of your application/ website
this is just quick thought for you...
Figured it out...
Talking to a co-worker of mine I discovered what he does in situations like this...
<script src="<%=ResolveClientUrl("~/Scripts/lib/jquery.js")%>" type="text/javascript"></script>
ResolveClientUrl plus the "~" infront of the Folder where I expect the jquery library to be seems to work.
I had a similar problem with asp.net mvc and css and javascript url.
Sometimes I need to use the function Page.ResolveClientUrl
and other time Page.ResolveUrl does the tricks
This happened to me with I was using MS Edge.
I went to the upper right hand corner, clicked the three dots, clicked 'More Tools', 'Developers Tools' to get the developers window
Then I right-clicked on the browser's 'Refresh' icon (the circle arrow), and selected 'Empty Cache and Hard Refresh'.
Everything was then fine. It's one of those answers that's sometimes too easy to get
I want to know how to use my Jquery UI theme with JGrowl. The site says it can be done. The questions is answered here:
How do I themeroll jGrowl
and the asker seemed happy with the answer, however I did what the solution said: include the Jquery ui css file.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jgrowl/jquery.jgrowl.js"></script>
<link rel="stylesheet" href="jgrowl/jquery.jgrowl.css" type="text/css"/>
But it does not use my custom theme. I tried not linking to the jgrowl.css file, but then it did not work right at all.
Any ideas? Thanks!
You express concern that it might actually be working, but with unexpected coloring. To test this, switch to a different jQuery theme, and see if the jGrowl elements change.
If they don't, check the jGrowl version. According to http://forum.jquery.com/topic/jgrowl-question, version 1.2.0 doesn't use jQuery-ui themes automatically, but version 1.2.4 does.