javascript reports that "$" and "alert" are undefined - javascript

Just embarking in learning yet another language (JavaScript) and following instructions from a tutorial. I have node and Brackets (the editor) installed. The tutorial was requesting the following to be put in a file named
"app.js":
$('form').on('submit',function () {
var text = $('#message').val();
alert(text);
return false;
});
The problem I have is that the system immediately complains that "$" (two places) and "alert" are undefined.
The index.html file was originally requested to specify:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="app.js"></script>
at the bottom (which caused the system to complain with an earlier simplified version about 'alert') but I replaced it with the following after visiting the code.jquery.com site:
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>
This solved the alert issue when the .js file was nothing more than a 'hello world', but now I have a "problem++" with the next version of the .js file shown above.
I suppose it could be something about the installation and/or paths; but I am at a loss figuring where that could be and how to fix it. Can any expert suggest something?
For the record: I am on a Windows 7 machine, using Chrome to display the html file.
Many thanks
Edit:
additional complete text of 'index.html' file:
<link rel="stylesheet" href="style.css">
<main>
<ol id="history">
<li>commander says: no offence, but you are a robot, aren't you?</li>
<li>roobie says: that is correct, sir</li>
<li>cookie says: hey doc, is that a male or a female? </li>
<li>robbie says: this information is meaningless</li>
</ol>
<form>
<input id="initials">
<input id="message">
<button>Send</button>
</form>
</main>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>

did you add the jquery link twice?
Please remove all jquery links and do the following:
remove all previous jquery links.
Add this code snippet between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

Unable to reference jquery

I have a feeling I'm missing something obvious, could someone please help? I'm unable to reference jquery and mustache using <script> tags.
404 messages
file structure 1
file structure 2
<script src='/js/handlebars-v3.0.1'></script>
<script src='js/handlebars-v3.0.1'></script>
<script src="js/jquery-1.11.2.min"></script>
<script src='http://localhost/learning/js/handlebars-v3.0.1'></script>
<script src="js/main.js"></script>
if you notice, I'm able to read in main.js just fine using <script src="js/main.js"></script> but not with <script src='js/handlebars-v3.0.1'></script>
appreciate any help, thanks.
You misspelled the Javascript file names:
It should be:
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/handlebars-v3.0.1.js"></script>
<script src="js/main.js"></script>
Same for other Javascript files. Also, you included multiple copy of same JS.
Side note: use either double quote or single quotes only, for tidiness sake

I can't load Plupload 2.1.2 in my ColdFusion page

I'm seeing a Javascript error that's preventing PlUpload from working in my ColdFusion page. I've reduced the code down to the simplest example that shows the error. As you can see there isn't actually any ColdFusion in the code in this stripped down example. This is Plupload 2.1.2 that I'm using.
The html code below in a test.htm page loads without error. But if I change the file name to test.cfm it causes this javascript error:
"SyntaxError: missing } after property list" # line 1056 column 14 in the jquery.ui.plupload.js file.
Firebug shows the live example as being "width: Â self.options.thumb_width,". It looks like "Â " is being inserted somehow in front of the "self.options.thumb_width" variable so it isn't being handled correctly.
I'm stymied; can anyone help?
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
</head>
<body>
</body>
</html>
I've got this working now. There seem to be two issues in the Plupload 2.1.2 download files that are easily fixed.
Fix 1: In the /js/jquery.ui.plupload/jquery.ui.plupload.js file, on line 1056 (in the "preloadThumb" function) - there is a double space that needs to be reduced to a single space. Removing the extra space fixes the issue so Plupload loads and runs as it should.
"width: self.options.thumb_width,"
needs to be changed to
"width: self.options.thumb_width,".
Fix 2: The other way to fix this issue is to load the minimized version of the file (which pretty much strips out all blank space so the double-space issue is handled).
A problem I see in the Plupload 2.1.2 download is that all the examples load the unminimized version, even in the production section.
The production example should be
"../../js/jquery.plupload.queue/jquery.plupload.queue.min.js"?
From the sample code head section:
<!-- production -->
<script type="text/javascript" src="../../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
<!-- debug
<script type="text/javascript" src="../../js/moxie.js"></script>
<script type="text/javascript" src="../../js/plupload.dev.js"></script>
<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
-->
So either fix above effectively solves the problem.

prettyPhoto Not Working - Error: Not a Function

I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.

Getting "$ is not a function" error

I am getting error message in firebug saying "TypeError: $ is not a function" and the code of small javascript underneath.
The full code is here:
<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#file').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
</script>
Can anyone help me with this? I am not into javascript programming. Thanks in advance!
Edit: This is what sits in my head section:
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="scripts/sfm_validatorv7.js"></script>
<script type="text/javascript" src="scripts/sfm_validate_jobform.js"></script>
<script type="text/javascript" src="scripts/rollover_images.js"></script>
<script type="text/javascript" src="slideshow/fadeslideshow.js"></script>
<script type="text/javascript" src="scripts/setslides.js"></script>
Do I need to add one more line with just "jquery.js" and upload this file to a server or I am missing something here, looks like all is ok above, thats why I am asking for help.
You've tagged this jQuery. jQuery is a library that provides a function called $, but you have to include the script that provides the library before you can use it.
<script src="path/to/jquery.js"></script>
For other options, see the jQuery download page, with special attention to the section on using a CDN.
1: include the script that provides the jQuery library and try;
2: find out that is there any other scripts contain this tag "$", you can use jQuery to instand of.

Categories

Resources