I have been trying to use the angular-timer, in my angularjs app, but I keep getting this error "TypeError: moment.locale is not a function".
I added my scripts like so. please can someone help me out?
<script src="assets/_plugins/classroom/angular-timer/angular-timer.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment.min.js"></script>
<script src="assets/_plugins/classroom/angular-timer/humanize-duration.js"></script>
<script src="assets/_plugins/classroom/moment/min/locales.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment-with-locales.js"></script>
Looks like your order might be wrong. I would guess that angular-timer depends on moment, locals and moment-with-locals, so it should be last in the loading order.
Update:
Alternatively, as plugin implementation can be problematic. I created a working demo of a custom timer/countdown for a user's question here, perhaps it can be adapted for your solution or at least lead you in the right direction.
You set an end time and supply a function to run when that end time is met.
Related
I have been trying to use angular intro js in my mockup angular js project the modal that asks whether the user needs to go through the tutorial is visible, However when I click the ok button that invokes the callMe method , an error is printed in the console stating,
message:"Intro.js is not available. Make sure it is properly loaded."
name:"Introjs not available."
Could anyone suggest where I am going wrong?
Make sure you have refered the angular-intro library and also injected as a dependency.
Reference:
<script src="intro.min.js"></script>
<script src="angular-intro.js"></script>
<script src="app.js"></script>
Module:
var app = angular.module('myApp', ['angular-intro']);
DEMO
Just to add to Sajeetharan's comment: It turns out that the order of dependency MATTERS. You must include the intro.js first, then angular-intro.js, then the main app.js.
Otherwise, you might get
Intro.js is not available. Make sure it is properly loaded." name:"Introjs not available.
I have read some code of strut.io but still confusing.
Here is the problem I got, I want to load impress().init();
when
<script type="text/template" id="impress-demo-template">
<div id="impress" onReady=" impress().init();">
</div>
</script>`
this is ready. And i got Uncaught TypeError: Cannot read property 'classList' of null
I know this function needs to load after all children in div#impress.
So I want to know how to deal with it. Should I add that function in my backbone view?
https://github.com/lostpupil/final_project_impressjs/
here is my github repo for that code, so I store data in Avos Cloud and this funciton is tested by test.html and demo.js.
well it seems nobody knows this question, and finally i wrote that program
the program is now host on http://breakingbad.vipsinaapp.com/ and the source code is host on github
feel free to make feed back, help me to improve, I am new to backbonejs, so I will thank you for kindness help.
I am new to AngularJS and working my way through some documents and tutorials to learn. My question is in reference to Egghead's video series, this video in particular, demonstrating how to put together a basic search filter. I wanted to use this in a real app I'm building for a friend with a small candle-making business but when I modified it to be her candles rather than the Avengers cast (as demo'd in the video) I got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify ...
I copied a redacted (only 3 cast members in the array) version of EXACTLY what is in the video demo into a jsfiddle and discovered it still yields the same error. (For reference, the Egghead demo is here: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). I've read at least a half dozen similar questions on this site so far and tried every solution offered, but none of them get rid of this error or cause the Avengers search -- which works fine in the video demo -- to actually function properly.
HTML:
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$" />
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
var Avengers = {};
Avengers.cast = [
{
name: "Robert Downey Jr.",
character: "Tony Stark / Iron Man"
},
{
name: "Chris Evans",
character: "Steve Rogers / Captain America"
},
{
name: "Mark Buffalo",
character: "Bruce Banner / The Hulk"
}
];
return Avengers;
})
function AvengersCtrl($scope, Avengers) {
$scope.avengers = Avengers;
}
Simply put, can someone offer a solution that will work and get rid of this error, as well as explain in simple English (not Ph.D. level "Angular Obscurese") what causes it (in a nutshell) and what needs to be done to avoid it?
Edit: Apologies, but the jsfiddle link referenced above from the tutorial is no longer active. I have removed the broken link. The tutorial mentioned is still available for viewing.
Try using No Wrap - In Head or No wrap - in body in your fiddle:
Working fiddle: http://jsfiddle.net/Q5hd6/
Explanation:
Angular begins compiling the DOM when the DOM is fully loaded. You register your code to run onLoad (onload option in fiddle) => it's too late to register your myApp module because angular begins compiling the DOM and angular sees that there is no module named myApp and throws an exception.
By using No Wrap - In Head, your code looks like this:
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script type='text/javascript'>
//Your script.
</script>
</head>
Your script has a chance to run before angular begins compiling the DOM and myApp module is already created when angular starts compiling the DOM.
You have to play with JSFiddle loading option :
set it to "No wrap - in body" instead of "onload"
Working fiddle : http://jsfiddle.net/zQv9n/1/
For people having the same error with a similar code:
$(function(){
var app = angular.module("myApp", []);
app.controller('myController', function(){
});
});
Removing the $(function(){ ... }); solved the error.
For people who find this old posting on the web by searching for the error message, there is another possible cause of the problem.
You could just have a typo in your call to the script, even if you have already done the things described in the other excellent answer. So check to make sure you can used the right spelling in your script tags.
it turns out that I got this error because my requested module is not bundled in the minification prosses due to path misspelling
so make sure that your module exists in minified js file (do search for a word within it to be sure)
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
I know its know a 9 year old question, I was having this same error, I tried to put a js file containing AngularJS code in a directory where I also had the following files
I tried several things with no success until I just made a simple test to move outside that directory, isolating the file and that worked, I still don't know the reason. Hope this helps to someone
I'm having some weird issue with extjs. I have a form and a grid, each works great separately but when I put the grid inside the form, everything starts to fall to pieces.
My point by doig so would be to be able to submit ids from rows of the grid and at the same time, stuff from the form.
To do so, I put the standardSubmit to false and added a javascript method to the onSubmit attriobute of my form.
However, when I submit the form this way, I get a weird error :
Uncaught SynthaxError: Unexpected token <
But the form values are submitted and visible in the request's header. Of course, when I put the standard submit to true, the error goes away but the values from the grid are not submitted anymore...
This SyntaxError usually relates to a loaded JavaScript resource. These are common mistakes that can trigger this error message:
<script type="text/javascript">
<script type="text/javascript">
[...]
</script>
</script>
<script type="text/javascript">
var s = I forgot the opening quotes so this <html> tag will break the script';
</script>
<script type="text/javascript"
var s = 'Here we forgot to close the opening <script> tag! Boom!';
</script>
It could also be triggered by the server setting the content type to 'application/javascript' for a non-JS resource (which then again includes this tags).
I also remember reading that this happened to someone using a minified version of a JavaScript library, but no details on the exact reason were given (other than that the problem was solved by using the non-minified version.
You can also wrap your JS resources in a CDATA tag for debugging purposes which should get rid of the SyntaxError and probably bring up a standard JS error message for the invalid script.
<script><![CDATA[
/* Code here */
]]></script>
Once you identify the resource that triggers the exception it should be possible to spot the problem by doing a through study of the source with your CSI sunglasses on.
Note: my assumption is that it can*not* be triggered by data that is sent to the server, but only data that is returned from the server. This is because the error refers to the parsing process on the client. But I'm not 100% sure on this one.
If this doesn't help you should really post the involved code and/or explain what you do exactly when you 'added a javascript method to the onSubmit attribute of [your] form'.
I am using Jquery 1.3.2 for a script that needs it to run in IE 7/8.
The following code I've made to modify tabSlideOUt v1.3
By William Paoli: http://wpaoli.building58.com is causing a conflict and throwing an "Invalid Argument" error in jquery.
<script type="text/javascript">
$(document).ready(function() {
$("div#slidetab_1.slide-out-div a.handle").click(function () {
$("div#slidetab_2.slide-out-div").toggleClass("slide-height", 250) ;
});
$("div#slidetab_2.slide-out-div a.handle").click(function () {
$("div#slidetab_2.slide-out-div.tab2.slide-height").toggleClass("slide-height");
});
});
</script>
It seems that the toggleClass function is causing the error. Does anyone know of another way to code this so I don't have to use toggle?
I'm sorry it seems so vague but I was having trouble posting an example on JS Fiddle.
All I need is an alternative method for toggleClass
Thanks in advance
Cheers
The problem is that you pass 250 as second argument... what is it supposed to do in your code?
From the documentation:
switch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
It seems to have no purpose so I suggest to remove it.
Update: After having a look at the jQuery source code, passing 250 should not throw that error. Nevertheless I suggest to remove it and test it. If it does not work, you have to provide more information (where exactly the error is thrown, etc.).
Alternatively, you use this function to toggle the class:
function toggleClass($element, cls) {
$element[$element.hasClass(cls) ? 'removeClass' : 'addClass'](cls);
}