I am attempting to debug an exception:
thumbnails.js:1 Uncaught ReferenceError: $ is not defined(…)
I am not sure if I am missing something else involving jQuery. I added the dependency file, and that is all I believe I should need. I believe the code I included is correct as well.
I have provided some of my HTML and JavaScript code below.
from inventory.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rob's Rock 'n' Roll Memorabilia</title>
<link rel="stylesheet" href="css/default.css" />
<script src="scripts/utils.js"></script>
<script src="scripts/thumbnails.js" type="text/javascript"></script>
<script src="scripts/jquery-3.1.1.slim.min.js"></script>
</head>
from thumbnails.js
$(window).ready(function () {
initPage();
});
HTML is loaded top to bottom, The script are also loaded in the same order and executed as soon as loaded.
Here you have loaded thumbnails.js first and then jquery.js, so thumbnail.js gets loaded first and it uses the jQuery's $ object/ function and since jquery is not loaded yet $ is not available and therefore you see this error on the page. Take care of the order of script tags in your HTML.
Secondly, I am not sure about this Thumbnail.js, of how it works but it is a $(document).ready(function () { //your code here }); there is nothing as window - ready event , it could be window load event.
Your load order is wrong. Move your JQuery script above your thumbnails script in the load order.
The order of included scripts is wrong
I presume util.js , thumbnails.js require jquery to work.
but you have include jquery after them. jquery need to be included at the beginning
<script src="scripts/jquery-3.1.1.slim.min.js"></script>
<script src="scripts/utils.js"></script>
<script src="scripts/thumbnails.js" type="text/javascript"></script>
Related
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
so I've been working on a (fairly simple) RESTful app using node.js, and I've made it towards the very last bit, now the only bit missing is using jQuery to manipulate the html page so I can edit the content of the html - and it's driving me absolutely mad.
I took the try.jquery.com tutorial, and it was pretty smooth; I'd by no means call myself a master of jquery, but I have very little trouble writing the code for basic html manipulation, except I never really considered where the jquery code would go. I've tried a bunch of different stuff and only one (really inconvenient) way has worked, so I was wondering if I could get some clarification.
(Note: all the js files are in the root folder, and index.html is in root/public; and I'm basically just running app.js through npm/package.json)
I've tried including the jQuery code in the main app.js file:
app.js
//some imports/requires here
var $ = require('jquery');
//more imports/requires here
//error; document is undefined
$(document).ready($('h1').text('Im Here');
app.get('/', function (req, res) {
res.sendFile(__dirname+'/public/index.html');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../app.js"></script>
I've tried including the jQuery code in its own file (tried just letting the code sit in the js file, and tried exporting the code as a function and calling it from app.js - both did nothing):
jusQueryin.js
var $ = require('jQuery'); //tried with and without this
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../jusQueryin.js"></script>
I've also tried (this worked, but I don't know how I would deal with the code in here from other .js file, if it is possible):
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
</script>
I've also tried different variations(i.e. including the 2nd part of the ready function in a function (or not), using an onClick event inside the dom.ready function, etc..), but the only one that worked was the last approach
Ideally, I'd like to be able to use the jQuery code inside app.js, less ideally would be in its own file; or if I have to include it inside the html file for some reason, I would at least need to be able to communicate with the code in the script block so that I can give it info from the database and so on.
Remeber one thing jQuery needs a window object to work. The first functionality of jquery is as dom query, dom is within a window object. As a result you must load the jquery and attach it to a window object.
As a node app you will have a browser window as a view to your app. Try adding jquery to that window from a CDN, add your requires there, voila the containing scope(window) which contains jquery now as global passes it also to the newly required file.
Error: jQuery requires a window with a document
index.html
<script>
window.$ = window.jQuery = require('./node_modules/jquery');
</script>
<script>
var UI = require('./controllers/UI');
UI.init(window);
</script>
Now var UI, which is a module in my case, contains
I have used 3 some jquery related files namely
<script type="text/javascript" src="/blog/jquery/jquery-1.7.1.min.js"></script>
<link type="text/css" href="/blog/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/blog/jquery/jquery-ui-1.8.17.custom.min.js"></script>
Now i am trying to use Humanmsg jquery plugin. It had 2 jquery files humanmsg.js and jquery.js.
I already have latest version of jquery so I haven't included jquery.js file from plugin. Now i am getting the error in Chrome Uncaught TypeError: Object # has no method 'easeOutBounce' jquery-1.7.1.min.js:4
I have checked this function to be present in jquery-ui-1.8.17.custom.min.js but still the browser is not reading from this file, in-spite showing error for file jquery-1.7.1.min.js.
Though the plugin is working when i replace the orignal jquery-1.7.1.min.js with the script file in humanmsg plugin(jquery.js) but rest of functionality of site depends on the orignal script file, so can't replace it.
Any idea(to remove the problem)/practices (to follow when including various script files from 3rd party).
PS: humanmsg.js use jQuery instead of $ ( if it is of any use).
All the scripts files are downloaded completely by browser.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type="text/javascript" src="/var/www/blog/jquery/jquery-1.7.1.min.js"></script> <!--ORIGNAL-->
<link type="text/css" href="/var/www/blog/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/var/www/blog/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<!--script type="text/javascript" src="jquery.js"></script--> <!--Plugin jquery file-->
<script type="text/javascript" src="humanmsg.js"></script>
<link href="humanmsg.css" media="screen" type="text/css" rel="stylesheet">
<title>Humanized Messages - Demo</title>
<script>
jQuery(document).ready(function() {
jQuery('a.showmessage').click(function() {
humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
return false;
})
jQuery('a.showmessage:last').click(function() {
humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
return false;
})
})
</script>
</head>
<body>
<p class="links">
Click Me to show message
</p>
</body>
</html>
EDIT:
I have found Gritter, good alternative for humanmsg and its working fine with latest version of jquery.
From the documentation for your plugin:
Humane Messages requires the jQuery javascript library. Also
recommended, but not required, is the jQuery plugin, Easing; to give
just the right bounce to the animations.
The easing plugin they use is at http://gsgd.co.uk/sandbox/jquery/easing/ which I don't see that you've included.
Your problem is that the plugin, Humanmsg, is more than 4 years old and you're using jQuery version 1.7.1.
A lot has changed within jQuery since version 1.1. Looking inside Humanmsg, reveals all kinds of superseded methods. Using .bind, for example, where jQuery 1.7 prefers the new .on method.
You'll have to find a more up to date plugin as I would not recommend using jQuery 1.1 with today's browsers.
You could try adding the easing plugin, or just the one easing function, but you still have the much larger issue of your plugin being way out of date.
I am writing a word/name generator. On my local computer the script works fine but when uploaded, the jQuery is not able to load the text file and I get a 404 not found error. The text file is there, I have checked a number of times. Here is the simplified code: http://namepicker.site11.com/test.html
Thank you for any advise,
Todd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery-Load Text File</title>
<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function loadXML()
{
var file= './names/names.txt';
$.get(file, function(data) {
alert(data);
});
}
</script>
</head>
<body onload="loadXML();">
</body>
</html>
Well a simple look at Chrome's Developer Tools reveals this error:
GET http://namepicker.site11.com/names/names.txt 404 (Not Found)
Obviously, you'd need to actually upload the names.txt file into the names directory.
Edit: I see that other files redirect to your hosting 404 page while names/names.txt does not, so perhaps it exists but does it somehow still send a 404 code. Is it a real text file or an underlying PHP file?
http://namepicker.site11.com/names/names.txt
The file does not exist, It needs to be there to be loaded. Try creating it and see if your having the same issues.
EDIT:
http://namepicker.site11.com/names/
File does seem to exist, perhaps check the CHMOD settings on the files.
jQuery is not ready yet. You need to wrap jQuery functions.
For example:
$(function() {
$(window).load(function()
var file= './names/names.txt';
$.get(file, function(data) {
alert(data);
});
});
});
i am trying to dynamically include js (and css) files into a webpage like this:
index.html -> loader_a.js -> a_foo.js, a_bar.js, a_foo.css and so on.
While this works without a problem in FF (using appendChild) i cant get it to run in IE6.
I've tried various available solutions (adding to dom node, ajax call and eval and more from (http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html) here and there and others like post #2013676) but it's not doing what its supposed to do.
When i check with DebugBar i see that my include files (eg a_foo.js) is actually loaded, but its content is empty - on other included files (1 Level/directly) this content is show so i assume there is the problem ...
The "error" i get is alway undefined object which is o/c b/c the function i call is not loaded properly so not much of a help. I dont get any errors on the includes.
I've validated the javascripts so those whould be ok.
Does anyone have the ultimate solution for this?
I can recreate my tests and post some code if it helps.
Thanks,
regards,
Thomas
Sample HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=en><HEAD><TITLE>Test</TITLE>
<script type="text/javascript" src="mmtest_files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="mmtest_files/multiload.js"></script>
<script type="text/javascript" >
function init2() {
// using the data from the loaded js files
var a= mmf("a");
document.getElementById('status').innerHTML = "Variable set:" + a;
}
// magic...
include(['mmt.js'],init2);
</script>
<BODY >
<H2>Test me!</H2>
<SPAN id=status>status old</SPAN>
</BODY></HTML>
JS 1 is multiload from answer 1
JS2 is a test include:
function mmf(param)
{
return "Called with" + param;
}
You need to use document.write in ie, in order to load scripts in parallel.
See: Loading Scripts Without Blocking
I have such a script btw: Loading Multiple Javascript Files In Order Asynchronously
(it may need some enchancements in Chrome)
UPDATE
There is a callback function, it is optional. It can be used to couple dependent script to the files. EG:
function myjQueryCode() {
// ...
}
include(['jquery.js','jquery-ui.js'], myjQueryCode);
So that your jquery dependent code will run after the files has been loaded.