Load jQuery
Load Highcharts 4.0.1
Load Highmaps 1.1.6 (which says it is compatible with 4.0.x)
seeing this error:
Uncaught TypeError: HighchartsAdapter.addAnimSetter is not a function
===
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script type='text/javascript' src='https://code.highcharts.com/4.0.1/highcharts.js'></script>
<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
</head>
</html>
fiddle: http://jsfiddle.net/93ukkqoh/ (see error in the javascript console)
Am I missing something obvious here?
Use following libraries in the following order
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
Related
I am giving the JavaScript file path perfectly in master page of asp.net but then also in browser console showing the error of status 404 in JavaScript path i.e. in short the browser not getting the path of the JavaScript file.
Here is my code:
<script type="text/javascript" src="index/analytics.js"></script>
<script type="text/javascript" src="index/modernizr.js"></script>
<script type="text/javascript" src="index/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="index/jquery.dlmenu.js"></script>
<script type="text/javascript" src="index/waypoints.min.js"></script>
<script type="text/javascript" src="index/jquery.counterup.min.js"></script>
<script type="text/javascript" src="index/owl.carousel.js"></script>
<script type="text/javascript" src="index/viewportchecker.js"></script>
<script type="text/javascript" src="index/bootstrap.min.js"></script>
<script type="text/javascript" src="index/transit.js"></script>
<script type="text/javascript" src="index/jquery.simpleslider.js"></script>
<script type="text/javascript" src="index/backstretch.js"></script>
<script type="text/javascript" src="index/custom.js"></script>
<script type="text/javascript" src="index/jquery.flexisel.js"></script>
<script type="text/javascript" src="index/classie.js"></script>
Now this JS file is in index folder only, but then also I really confused that why browser console showing this type of error that status:
404 javascript file not found.
Image:
You might try using something like the ResolveUrl() method to reference your jQuery library to ensure that it is targeting the proper location :
<script src="<%= ResolveUrl("~/index/jquery-1.10.1.min.js") %>" type="text/javascript"></script>
So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.
For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.
I'm trying to use the jQuery datepicker plugin but I get this error:
Uncaught TypeError: Object [object Object] has no method 'zIndex'
I'm using jQuery v1.10.2 and jQuery UI Datepicker v1.10.3. This is how I try to call the datepicker method
<input type="text" id="foo" />
<script type="text/javascript" src="/my/path/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/my/path/js/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript">
$("#foo").datepicker();
</script><script type="text/javascript">
Seem like you're missing core jQueryUI file, try to add it to your page and it should be fine:
<script type="text/javascript" src="/my/path/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/my/path/js/jquery.ui.datepicker.min.js"></script>
I don't have you jquery file as there are stored on the server
use the following link as they worked for tried & tested on my system
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
to have css of jquery datepicker use the following file
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Must be certain problem with your js files
The problem might be that the DOM isn't completely loaded. The initialization of the datepicker should be done in the "document ready" function like this:
$(function() {
$("#foo").datepicker();
});
I al having trouble using AND prototype.js (for appear() and fade() function in menu) AND jqplot for drawing graphs.
When I load external js files like this, then prototype works but I have no jqplot graph (case A) :
<script src="includes/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="includes/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
<script language="javascript" type="text/javascript" src="includes/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="includes/dist/jquery.min.js"></script>
<script type="text/javascript" src="includes/dist/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="includes/dist/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="includes/dist/jquery.jqplot.css" />
<script type="text/javascript" src="includes/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasOverlay.js"></script>
When I first load the jqplot files and then the prototype files, then I have a graph but no navigation in my menu's (case B)
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
In case A I get the error :
TypeError: element.dispatchEvent is not a function
TypeError: element.getStyle is not a function
In case B I get the error :
TypeError: $(...).ready is not a function
How can I use both ??
Thanks.
Try this
load jQuery
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
Run noconflict()
<script language=javascript">jQuery.noConflict()</script>
load Prototype and Scripty
<script src="includes/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="includes/scriptaculous/scriptaculous.js" type="text/javascript"></script>
then load everything else. Also it looks like you are double loading jQuery, which will cause problems.
Also for the error
$(...).ready is not a function
In this situation $() is the Prototype method - and this is trying to run the jQuery ready() method - find this and change to
jQuery(...).ready
I have problem with simple modal! Is not working I got some errors! I have mootols and jquery in header.php
Error is:
Uncaught TypeError: Object #<Object> has no method 'addEvent' demo.js:8
(anonymous function) demo.js:8
(anonymous function) mootools-core-1.3.1.js:354
h mootools-core-1.3.1.js:32
Array.implement.each mootools-core-1.3.1.js:38
invoke.fireEvent mootools-core-1.3.1.js:353
h
My code is:
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Move your last script tag to first
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
It will work..
or may be you have multiple instances of jQuery on your page.
You need to either:
Aet rid of one of them (there's no need to have both)
Alias the jQuery used in custom.js
Use noConflict() to resolve which jQuery gets access to the $
variable.