I recently built a custom dashboard with the help of Sebastiaan forums in this post:
http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/60887-Custom-dashboard-Umbraco-update-service
However, I have now modified my code in an attempt to make the interface more user friendly by including a datepicker on two fields so that our users can pass two dates into our web services and have a result returned.
The problem is, I am receiving the following Javascript errors in Firebug when I try and access my Dashboard in the back office:
Error: Argument 'AxumUpdateService' is not a function, got undefined cb@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:17:79 xa@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:17:187 Jc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:53:310 k/<@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:44:274 n@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:7:72 k@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:44:139 e@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:40:139 y/<@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:39:205 Odhttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:158:14 u/j.success/<@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:100:347 Uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 Uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 Uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 Uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 Uc/g/<.then/<@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:80:485 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:92:268 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:90:140 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:92:429 j@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:101:78 r@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:104:449 dd/http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:106:90
http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js Line 63
At first I thought it was due to some of my Javascript causing a conflict but I have checked it and there are no missing semicolons or errors in the code.
I then checked my package.manifest to ensure that Jquery was called before AngularJS as this is advised on most forums however, this still hasn't helped with this issue.
Does anybody know how to circumvent these issues?
package.manifest
{
javascript:[
"~/app_plugins/Dashboards/jquery-1.11.2.min.js,
"~/app_plugins/Dashboards/css/jquery-ui.min.js",
"~/app_plugins/Dashboards/AxumUpdateServiceJquery.js",
"~/app_plugins/Dashboards/AxumUpdateService.controller.js",
"~/app_plugins/Dashboards/AxumUpdateService.service.js",
],
css:[
"~/app_plugins/Dashboards/css/axumupdateservice.min.css",
"~/app_plugins/Dashboards/css/jquery-ui.min.css"
]
}
AxumUpdateService.service.js
angular.module("umbraco.services").factory("AxumUpdateService", function ($http) {
return {
getAll: function (from, to) {
from = from || "";
to = to || "";
return $http.get("/umbraco/api/Axum/GetAllGroupTours" + "?fromDate=" + from + "&toDate=" + to);
}
}
});
AxumUpdateService.controller.js
angular.module("umbraco")
.controller("AxumUpdateService",
function ($scope, $http, AxumUpdateService) {
$scope.getAll = function () {
$scope.load = true;
$scope.info = "Retreiving updates";
AxumUpdateService.getAll($scope.fromDate, $scope.toDate).success(function (data) {
$scope.result = data;
$scope.info = data;
$scope.load = false;
});
};
});
AxumUpdateServiceJquery.js
$(document).ready(function () {
$(".datepicker").datepicker();
});
