Jquery "$.uniform is undefined" error - javascript

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.

Related

Sweet Alert Not Working

I want to integrate sweetalert with my project. but I'm having the following error
I've been looking for solutions to this problem quite a long time, but I still can not solve it
this is my html code
<link href="/vendors/sweetalert/sweetalert.css" rel="stylesheet">
<script src="/vendors/jquery/dist/jquery.min.js"></script>
<script src="/vendors/sweetalert/sweetalert-dev.js"></script>
<script type="text/javascript">
sweetAlert("a", "b", "error");
</script>
I had time to find a similar problem, by replacing swalto swalAlerttheir problem successfully repaired, but not with my problem
please help me. thx..
Your code works for me using the CDN links. Check your console to make sure you're not getting a 404 error when referencing the css or js files. Also, I'm linking to version 2. Is that what version you're using locally?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.11.0/sweetalert2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.11.0/sweetalert2.all.min.js"></script>
<script type="text/javascript">
sweetAlert("a", "b", "error");
</script>

'$' was used before it was defined .hover

I'm trying to get a background gif to play when I hover over a link, and reset and play as you hover over it again.
It works exactly as I want it in this jsFiddle.
When I write my code up in Brackets I get this warning -> $' was used before it was defined. $("#hover").hover(function () {
I have included the Javascript in the head of my HTML like:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="main.js"></script>
<head>
The HTML, CSS and JavaScript are the same as in the jsFiddle.
Checked in browser also, doesn't work. i get this warning ---> imain.js:10 Uncaught ReferenceError: $ is not defined at main.js:10 My page in its entirety can be seen here. jepen84.github.io/github.io
You get the error because jQuery does not load.
To load jQuery, you used:
<script type="text/jquery" src="jquery-3.2.1.js"></script>
jQuery is not a programming language. It's solely a javascript library providing some convenient features.
In your <script>-tag, change type="text/jquery" to type="text/javascript" and it will load the file.

jQuery UI dialog not appearing Squarespace adblock detect

I have created an AdBlock detector, and my jQuery dialog does not seem to be working. Note: the "adblock" variable is already referenced. Also, I am using Squarespace, which is why I had to add the code to the body.
if(adblock) {
$("body").html('<div id="alert-dialog" title="Turn off AdBlock"> Please turn your AdBlocker off. It hurts our business. To turn off AdBlock, just disable it on this page. Thank you.<br><br><br> Sincerely, The <i>Wildwood Howl</i></div>'+$("body").html());
$(function() {
$( "#alert-dialog" ).dialog();
});
}
Here is the error:
TypeError: $("#alert-dialog").dialog is not a function
AKA the dialog function is undefined. I don't know why. Here are my added links and scripts.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
Click here to see my page. Also, there are supposed to be background images, but they are not showing up.
I can provide a jsfiddle for this. Thanks. Help is appreciated.
The problem is probably because you're adding jQuery twice.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
---------------^ remove this
jQuery UI extends the $ created by jquery-1.10.2, but then you add jquery-latest.min.js which probably overwrites the $ created earlier which has the jQuery UI functions.
also make sure you're code runs after these two scripts are evaluated and DOM is ready

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.

Categories

Resources