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.
Related
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>
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
I've come with hopes that I can achieve a functional answer to my series of baffle. I have tried linking my indexjs.js to my index.html using <script type="text/javascript" src="./indexjs.js"></script> --- yet to no avail. I have also tried inline editing such:
link type="text/css" rel="stylesheet" href="./indexcss.css"/
script type="text/javascript"
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseleave(function(){
$(this).fadeTo('slow',1.0);
});
});
/script
also to no avail. With sidenotes intact I have tried several JQuery installations and the plugin but receive an error code upon is finalization similar to: Windows Script Host
Script: C:\Users\....\Desktop\public_html\indexjs.js
Line: 1
Char: 1
Error:'document' is undefined
Code:800A1391
Source: Microsoft JScript runtime error
I have used googleajax referenceing through src ; as well as saving jquery-1.12.4 to the same public_html folder.
Seems the issue is with link & script tag
Note < & >
HTML LINK TAG
<link rel="stylesheet" type="text/css" href="href="./indexcss.css">
Script Tag
<script type="text/javascript">
$(document).ready(function(){
//Rest of code
});
</script>
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.
I am using uniformjs to style some html element but when i try to update an element such as a check box using
$.uniform.update('input[type=checkbox]');
I get the error
$.uniform is undefined
any one else have an idea how to solve this?
I have both jQuery and the uniform.js added to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
What's weird is this worked when it was a regular HTML page and stopped working when i made it into a ASP.NET page and added custom form validators. Perhaps there is some clash?
Reason for this error is browser cant identify $.uniform which can be because of following two reasons:
You have not included uniform.js file to your page, check if a similar looking lines is present in your markup.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
You are referencing it before its been loaded (have you included it at the end of the page, after the markup?)
You have to load all your dependencies and the current library itself to make it work.
For your css:
<link rel="stylesheet" href="uniform.default.css" media="screen" />
For your javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
Please, check this JSFiddle that I've build for you, showing uniformjs working.