I am trying to use the demo items on the Kendo page in my Angular app. Most work fine, but a few of them are throwing JSHINT errors of "undefined" objects, for example:
function MyCtrl($scope) {
$scope.showInContainer = function() {
var date = new Date();
date = kendo.toString(date, "HH:MM:ss.") + kendo.toString(date.getMilliseconds(), "000");
$scope.notf2.show(date, "info");
};
$scope.dismissAll = function() {
$scope.notf1.hide();
$scope.notf2.hide();
};
}
This says that "kendo" is undefined (as in kendo.tostring())
This leads me to believe some code is missing somewhere.
I have included kendo.core.min.js, kendo.ui.core.min.js, angular-kendo.js as directed
Please try this code to verify your kendo.version is correct in your global namespace object, "kendo".
https://jsbin.com/hakufipici/edit?html,js,output
$(function(){
if(kendo === "undefined"){
alert('no kendo');
}else{
alert(kendo.version);
}
});
Related
I have multiple functions inside of my factory and I cannot call my saveCharacter function from a button click using ng-click. The getCharacters function works just fine. Sorry in advance for the repost, I have gone over many different examples and cannot solve my particular issue with those. I can see my functions when I log the xmlService, but i'm not sure why it won't call to it. I was trying to return a post to a PHP file in saveCharacter, but changed to a string return to try to test to see what my issue was.
Thanks again for any help.
(function(){
var app = angular.module('arena', []);
app.factory('xmlService', function($http){
var factory = {};
factory.getCharacter = function getCharacter(){
return $http.get('xml/characterTemplate.xml');
};
factory.saveCharacter = function saveCharacter(){
return "hello";
//return $http.post('php/crud.php');
};
return factory;
});
app.controller('FighterController', ['$scope','xmlService', function($scope, xmlService){
this.fighterList = fighterList;
$scope.saveFighter = function saveFighter(){
console.log(xmlService);
xmlService.saveCharacter.success(function(data){
console.log(data);
});
}
function loadFighters(){
xmlService.getCharacter().success(function(data){
var x2js = new X2JS();
var charactersList = x2js.xml_str2json(data);
for(var i = 0; i < charactersList.characters.character.length; i++)
{
var currentFighter = charactersList.characters.character[i];
fighterList.push(currentFighter);
}
$scope.FighterController = charactersList;
});
}
loadFighters();
}]);
var fighterList = [
];
})();
Other questions I had while writing my first Angular app, what is the point of the code:
$scope.FighterController = charactersList;
does that allow me to access the returned data on the view side? do I have to reset the scope in my saveFighter function to cause my button to work?
Am I setting the dependencies correctly for my app.controller, and is that dependency injection?
Thank you all, and any comments on how my code is setup are greatly appreciated!
You haven't really explained what you did to fix this issue, so I'll explain it.
Here, you are trying to call xmlService.saveCharacter.success():
xmlService.saveCharacter.success(function(data){
console.log(data);
});
But xmlService.saveCharacter is a function. It has no success property; success is undefined. So this gives the error you were seeing.
You need to call xmlService.saveCharacter():
xmlService.saveCharacter().success(function(data){
console.log(data);
});
But this is still a problem because the saveCharacter() function returns the string "hello". This string doesn't have a success property. Yet again success is undefined, so now that causes the same error.
To fix that error, you just need to remove the return "hello"; and uncomment the code you had commented out:
factory.saveCharacter = function saveCharacter(){
return $http.post('php/crud.php');
};
Fixing those two problems should remedy your issue.
You are missing invoking a function with () change code to:
$scope.saveFighter = function saveFighter(){
console.log(xmlService);
xmlService.saveCharacter().success(function(data){
// ----------------------^
console.log(data);
});
}
$scope.FighterController = charactersList;is assigning data of characterList to scope variable and scope variable are accessible in html scope is like a bridge between controller and views.
I recommend you to start reading angularjs
I adjusted my factory to this structure and now I can call my functions.
app.factory('xmlService', function($http){
var factory = {
getCharacter: function(){
return $http.get('xml/characterTemplate.xml');
},
saveCharacter:function(){
console.log('hello?');
return $http.post('php/crud.php');
}
};
return factory;
});
in my controller
$scope.saveFighter = function(){
console.log(xmlService);
xmlService.saveCharacter().success(function(data){
console.log(data);
});
}
function loadFighters(){
xmlService.getCharacter().success(function(data){
var x2js = new X2JS();
var charactersList = x2js.xml_str2json(data);
for(var i = 0; i < charactersList.characters.character.length; i++)
{
var currentFighter = charactersList.characters.character[i];
fighterList.push(currentFighter);
}
$scope.FighterController = charactersList;
});
}
loadFighters();
I've been working on writing a custom jquery plugin for one of my web applications but I've been running into a strange error, I think it's due to my unfamiliarity with object-oriented programming.
The bug that I've been running into comes when I try to run the $(".list-group").updateList('template', 'some template') twice, the first time it works just fine, but the second time I run the same command, I get an object is not a function error. Here's the plugin code:
(function($){
defaultOptions = {
defaultId: 'selective_update_',
listSelector: 'li'
};
function UpdateList(item, options) {
this.options = $.extend(defaultOptions, options);
this.item = $(item);
this.init();
console.log(this.options);
}
UpdateList.prototype = {
init: function() {
console.log('initiation');
},
template: function(template) {
// this line is where the errors come
this.template = template;
},
update: function(newArray) {
//update code is here
// I can run this multiple times in a row without it breaking
}
}
// jQuery plugin interface
$.fn.updateList = function(opt) {
// slice arguments to leave only arguments after function name
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var item = $(this), instance = item.data('UpdateList');
if(!instance) {
// create plugin instance and save it in data
item.data('UpdateList', new UpdateList(this, opt));
} else {
// if instance already created call method
if(typeof opt === 'string') {
instance[opt](args);
}
}
});
}
}(jQuery));
One thing I did notice when I went to access this.template - It was in an array so I had to call this.template[0] to get the string...I don't know why it's doing that, but I suspect it has to do with the error I'm getting. Maybe it can assign the string the first time, but not the next? Any help would be appreciated!
Thanks :)
this.template = template
Is in fact your problem, as you are overwriting the function that is set on the instance. You end up overwriting it to your args array as you pass that as your argument to the initial template function. It basically will do this:
this.template = ["some template"];
Thus the next time instance[opt](args) runs it will try to execute that array as if it were a function and hence get the not a function error.
JSFiddle
For a previous question I answered here on SO, I made the following library.
(function(){
var LS = function(){
return new LS.fn.init();
};
LS.fn = LS.prototype ={
//Check to see if the browser suports LocalStorage
init : function(){
this.ls = (typeof(Storage)!=="undefined") ? false : true;
return this;
}
}
LS.fn.init.prototype = LS.fn;
LS.fn.init.prototype = {
set : function(name, val){
if(this.ls) localStorage.setItem(name, val);
},
get : function (name){
if(this.ls) return localStorage.getItem(name);
},
remove : function(name){
if(this.ls) localStorage.removeItem(name);
},
test: function(){
alert("hi")
}
}
window.LS = window.ls = LS;
})();
This was working fine until recently.
I am getting errors like:
LS.set("foo", "bar"); // Error: undefined is not a function...
Even the following code gives an error:
LS.test();
Why has this stopped working?
Thank you.
NOTE: Previously, I had a typo, but now I have fixed that and it still doesn't work.
Your window.LS is initialized to a function, and you seem to use it as if you expect it to be initialized to the return value of that function.
Change this line:
window.LS = window.ls = LS;
to:
window.LS = window.ls = LS();
Also, try to simplify your library code. It seems very convoluted. At the very least comment it out a bit to indicate what the various parts do/are used for. The part with the typo (LS.protorype) isn't used anywhere for example.
I have the following example code
var object = {
userDefinedFunction : function(){
//no implementation, this will be defined by the user
}
}
What i want to achieve is the user giving his own implementation of it:
object.userDefinedFunction = function(){
alert("just testing");
}
I tested this and works as i expected, what i want to know is:
is this the javascript way of solving this kind of problem?
let's say that it's mandatory that userDefinedFunction is implemented, how do i make sure of this? I could rely on something like the following, checking for implemented, but i'm learning javascript so i want to know how to leverage the language:
userDefinedFunction : function(){
implemented = false;
}
Thank you.
I don't know if this is the way to go, but if your object has to be initialized somehow by the user, you can test in this function, whether userDefinedFunction is defined and throw an exception if not.
One idea that feels to be a cleaner implementation, is to let the user provide some kind of configuration object that defines the functions, something like:
yourObject.initialize({
userDefinedFunction: function() {}
});
You could throw an error in the default implementation:
var object = {
userDefinedFunction : function(){
throw "userDefinedFunction must be implemented";
}
}
or show an alert box, depending on your application.
var object = {
userDefinedFunction : undefined,
anotoherDefinedFunc : undefined,
/* ... */
hasUserImplementedInterfaces : function() {
if (typeof object.userDefinedFunction !== 'function') return false;
if (typeof object.anotoherDefinedFunc !== 'function') return false;
/* ... */
return true;
}
};
console.log(object.hasUserImplementedInterfaces());
hasUserImplementedInterfaces() function checks for user function implementations so you can execute as first check using that object.
So I am trying to consolidate a bunch of code into some nice NameSpaced functions, but am having a tough time getting it to all work together. For example, I have this (edited down for clarity):
YW.FB = function() {
return {
init: function(fncSuc, fncFail) {
FB.init(APIKey, "/services/fbconnect/xd_receiver.htm");
FB.Bootstrap.requireFeatures(["Connect"]);
if(typeof fncSuc=='function') fncSuc();
},
login: function(fncSuc) {
this.FB.Connect.requireSession(function() {
if(typeof fncSuc=='function') fncSuc();
});
},
getUserInfo: function() {
var userInfo = new Object;
FB.Facebook.apiClient.users_getInfo([FB.Facebook.apiClient.get_session().uid],["name"],function(result, ex){
userInfo.name = result[0]['name'];
userInfo.uid = result[0]['uid'];
userInfo.url = FBName.replace(/\s+/g, '-');
return userInfo;
})
}
};
}();
On a normal page I can just do:
FB.init(APIKey, "/services/fbconnect/xd_receiver.htm");
FB.Bootstrap.requireFeatures(["Connect"]);
var userInfo = new Object;
FB.Facebook.apiClient.users_getInfo([FB.Facebook.apiClient.get_session().uid],["name"],function(result, ex){
userInfo.name = result[0]['name'];
userInfo.uid = result[0]['uid'];
userInfo.url = FBName.replace(/\s+/g, '-');
return userInfo;
})
And it works.
I have been trying to do:
YW.init();
YW.login();
YW.getUserInfo();
But it doesn't work. I keep getting 'FB.Facebook is undefined' from YW.getUserInfo
I could be doing this all wrong too. So the FB.init, FB.Facebook stuff is using the facebook connect libraries. Am I doing this all wrong?
If you look at the JavaScript that your browser has parsed in Firebug or a similar web debugger do you see the Facebook Connect JavaScript there? Looks like it's not in scope, and since FB is at the global level that means it's not in scope at all. Has nothing to do with namespaces. Global in JavaScript is global everywhere.