I have the following JSFiddle: http://jsfiddle.net/rodneyhickman/NYh2b/1/ I'm trying to set it up to test some Kendo UI DataViz graphs.
I'm getting the following script errors:
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.all.min.js:9
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.dataviz.min.js:10
Uncaught ReferenceError: global is not defined
Any help would be appreciated.
Couple of things. If you are referencing the kendo.all.min.js, you don't need any other .js files, it has all of them included (dataviz, web and mobile). Also you need to include the dataviz.common.css and dataviz.THEMENAME.css (I included default). Also switch back to jquery 1.9.1 and it should work fine.
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
Here is a forked jsfiddle. http://jsfiddle.net/fWG9R/ (I used the latest version 2013.3.1119)
If you want to include other components from web or mobile, you will need to include the kendo.common.css, and kendo.THEMENAME.css, and kendo.mobile.css respectively.
Related
I am trying to add into my website (Magento Store) a slide in panel (https://codyhouse.co/gem/css-slide-in-panel/) and I am getting issues when including the JQuery.js file. It complains about not finding a particular function for other extensions. The result I could only find is that it is a common issue called JS conflict. I am newbie and any help will be appreciated.
List of errors:
prototype.js:5653 Uncaught TypeError: element.attachEvent is not a function
extendedreviews.js:14 Uncaught TypeError: $j(...).hoverIntent is not a function
prototype.js:5653 Uncaught TypeError: element.attachEvent is not a function
somesome.com/:777 Uncaught TypeError: $j(...).foundation is not a function
prototype.js:5734 Uncaught TypeError: element.dispatchEvent is not a function
I am including the JS for this panel in head file as
<script type="text/javascript" src="js/slidein/modernizr.js"></script>
<script type="text/javascript" src="js/slidein/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/slidein/main.js"></script>
Note that, before these 3 includes, there are many other JS included for third party extensions. The errors are related to files for these third party extensions
Try to add these Cdn's.I hope these will work fine.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
I am trying to replicate the chart found here: http://jsfiddle.net/pablojim/Hjdnw/ within my angular app.
However, unlike in the example above, i am using version 1.2.28 instead of v1.0..
I have replicated my set up here: http://plnkr.co/edit/ugIbk80yBXuvjsUFhiiP?p=preview
However i am getting 2 errors in the console:
TypeError: HighchartsAdapter is undefined
Error: H is not a function
Does the order of script loading matter? I am following:
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="highcharts.js"></script>
<script src="highcharts-ng.js"></script>
<script src="app.js"></script>
You need to add jQuery to make highcharts work properly
See working plunkr
I've added
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:
Uncaught TypeError: Cannot read property 'applyAll' of undefined
The error is occurring on line 23 of gcal.js:
21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;
The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.
Here is my html:
<head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='calendar'></div>
</body>
My JavaScript:
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'my-api-key',
events: {
googleCalendarId: 'my-calendar-id'
}
});
});
And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).
The problem is with the order you've imported the library files.
fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.
Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.
If you change the ordering like this, it works without problems.
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.
I am trying to create "coach marks"/ instruction overlays in my hybrid mobile app using Jquery and the Chardin.js library : https://github.com/heelhook/chardin.js
But unfortunately I keep getting this error :
[FATAL] [NONE] Uncaught Exception: TypeError: 'undefined' is not a function (evaluating '$('body').chardinJs('start')') at (compiled_code):5
this is how my JS file looks like :
$(document).ready(function() {
console.log("IN CHARDIN INIT");
$('.container').chardinJs('start');
});
And I load all the files in the HTML file like this (this code is not showing all the div elements for simplicity):
<head>
<link rel="stylesheet"
href="../../css/jquery/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="../../js/jquery/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Chardin/ Coach marks stuff -->
<script src="../../js/chardin/chardinjs.min.js"></script>
<link href="../../js/chardin/chardinjs.css" rel="stylesheet" />
</head>
<body>
<!-- Coach marks stuff -->
<script type="text/javascript" src="../../js/chardin/chardinInit.js"></script>
</body>
Am I doing something wrong here ??
After days of debugging I found out that the ChardinJs lib was not loading and I had to add it to the body of HTML to load.
The other thing was that Chardin JS has a dependancy that is not mentioned on their website. It needs the bootstrap plugin that I was missing. As soon as I added this dependancy, It started working.
I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**