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.
Related
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>
I found few answers on stack overflow but still cant resolve my problem.
I am running on Django but I dont think it is relevant for this error.
I try to make work my date picker java script but I am getting the error
1:27 Uncaught TypeError: $(...).datepicker is not a function(anonymous function) # 1:27fire # jquery-1.9.1.js:1037self.fireWith # jquery-1.9.1.js:1148jQuery.extend.ready # jquery-1.9.1.js:433completed # jquery-1.9.1.js:103
jquery-2.1.0.min.js:4 XHR finished loading: POST "https://localhost:26143/skypectoc/v1/pnr/parse".l.cors.a.crossDomain.send # jquery-2.1.0.min.js:4o.extend.ajax # jquery-2.1.0.min.js:4PNR.findNumbers # pnr.js:43parseContent # contentscript.js:385processMutatedElements # contentscript.js:322
This is all my scripts :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#extra-content").hide();
$("#toggle-content").click(function(){
$("#extra-content").toggle();
});
});
</script>
any feedback will be very appreciated
What went wrong?
When you include jQuery the first time:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
The second script plugs itself into jQuery, and "adds" $(...).datepicker.
But then you are including jQuery once again:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
It undoes the plugging in and therefore $(...).datepicker becomes undefined.
Although the first $(document).ready block appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...) (window.$ to be precise) is referring to the most recently loaded jQuery.
You would not run into this if you called $('.dateinput').datepicker immediately rather than in $(document).ready callback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the ready callback.
Solution
If you want to use datepicker from jquery-ui, it would probably make most sense to include the jquery-ui script after bootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it will work fine.
Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.
The error is because you are including the script links at two places which will do the override and re-initialization of date-picker
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
So exclude either src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
or
src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"
It will work..
if you are using ASP.NET MVC
Open the layout file "_Layout.cshtml" or your custom one
At the part of the code you see, as below:
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/jquery")
Remove the line "#Scripts.Render("~/bundles/jquery")"
(at the part of the code you see) past as the latest line, as below:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
This help me and hope helps you as well.
You just need to add three file and two css links. You can either cdn's as well.
Links for the js files and css files are as such :-
jQuery.dataTables.min.js
dataTables.bootstrap.min.js
dataTables.bootstrap.min.css
bootstrap-datepicker.css
bootstrap-datepicker.js
They are valid if you are using bootstrap in your project.
I hope this will help you.
Regards,
Vivek Singla
Including more than one reference to Jquery library is the reason for the error Only Include one reference to the Jquery library and that will resolve the issue
We need to add the declaration of our jQuery plugin under interface with the same name. We don’t want to mess with the jQuery source code, so we need to create our own type definition file. I’m using React/typescript so just follow these steps
Open nodemodules and go into types folder.
Go into jQuery and open jQuery.d.ts fileand add the below code into interface JQuery<TElement = HTMLElement> extends Iterable {
daterangepicker(options?: any, callback?: Function) : any;
I’m declaring the daterangepicker function (this is the actual function that the API expose) and setting all its arguments as any ( You can go further and use specific types, but in this case, I will keep it simple ).
Now when the typescript compiler sees our interface, it will merge it with the jQuery interface and the error is gone.
That’s all!
This error is occur,because the function is not defined.
In my case i have called the datepicker function without including the datepicker js file that time I got this error.
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.
I'm developing a jquery mobile webapp
The base structure require jquery.js and jquery-mobile.js ad documented in jqueryMobile doc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="myjqueryconfig.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
All works good with this structure but I want to merge jquery js file with jquery-mobile js file to have a single js file but when I do that (simply by cut and pust jquery mobile code to the end of jquery file) page stop working and firebug give me a javascript error:
TypeError: $(...).bind(...) is not a function
My single .js file is structured as:
//jquery 1.9.1 min source code
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false
})
//jquery mobile min 1.3.0 source code
Adding a ; between the files when concatenating them solves the problem.
Look at this code :
(function(){
console.log('A');
}())
(function(){
console.log('B');
}())
Without an intermediary semicolon, the second IIFE looks like an argument passed to the first one. And so it fails. Adding the semicolon solves the problem as it specifies those are two statements.
Semicolons in JavaScript are optional but it's very dangerous to omit them.