$.fn.dataTable.Editor is not a constructor - RequireJS with DataTables - backbone.js

Library versions:
jQuery : 2.1.1
DataTables : 1.10.1-dev
dataTablesTableTools : 2.2.1
dataTables.dataTables.editor.min.js : 1.2.3
I'm trying to implement CRUD operation using datatableseditor using Backbone, RequireJS and Datatables.But I'm getting the error message:
$.fn.dataTable.Editor is not a constructor"
What could be the reason?
Here is my configuration:
require.config({
baseUrl: 'js',
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatablesTableTools: 'vendor/dataTables.tableTools.min',
datatablesEditor: 'vendor/dataTables.editor.min'
},
shim: {
jquery : {
exports : '$'
},
datatables: {
deps: [
'jquery',
]
},
datatablesTableTools: { deps: ['datatables'] },
datatablesEditor: { deps: ['datatables'] }
}
});
Using it as follows:
require(["jquery", "datatables"], function () {
var editor = new $.fn.dataTable.Editor( {
"ajax": "table.line.php"
} );
$('#myGrid').dataTable( {
"aaData": [
['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version" },
{ "sTitle": "Grade" }
],
"tableTools": {
"sRowSelect": "os",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
});

I think you have made a mistake in your table of dependencies. In your second code, it should be like this :
require(["jquery", "datatablesEditor"], function () {
[...]
instead of
require(["jquery", "datatables"], function () {
[...]

I've checked and it's more vicious. When you look the source code of the plugin datatables-fixedcolumns for example, its name is specified so you need to use it instead of your own alias/name.
The source code dataTables.fixedColumns.js :
[...]
// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
define( 'datatables-fixedcolumns', ['jquery', 'datatables'], factory );
}
else if ( jQuery && !jQuery.fn.dataTable.FixedColumns ) {
// Otherwise simply initialise as normal, stopping multiple evaluation
factory( jQuery, jQuery.fn.dataTable );
}
[...]
So in your requirejs.config, you need to write this :
[...]
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatables-fixedcolumns: 'vendor/dataTables.fixedColumns'
[...]
instead of
[...]
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatablesFixedColumns: 'vendor/dataTables.fixedColumns'
[...]

Related

Why does Chutzpah only see the tests if they listed under "References" section and doesn't if they under "Tests"

I have a quite big solution with a few web module projects (they are kind of modules and they are copied into a common project which is the SPA). I started to write jasmine-typescript tests against my angular 1.5.8 code. In order to spare copying time I need to set up Chutzpah for every web project so I can test every module code.
I have the chutzpah.json below and this way when I select "Open in Browser" then I can see the tests.
{
"Framework": "jasmine",
"FrameworkVersion": "2",
"Compile": {"Mode": "External"},
"References": [
{
"Path": "../../where_angular_and_other_scripts_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../where_angular-mocks_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../CommonLibrary/",
"Includes": [ "*.js" ],
"Excludes": [ "*.Spec.js" ]
},
{
"Path": "app/modules/Framework/",
"Includes": [ "*.Spec.js" ]
}
]
}
If I change the file like below then there are no tests. I don't understand why. Chutzpah cannot manage that a solution has more than one chutzpah.json in different directories? According to the documentation it shouldn't be problem.
{
"Framework": "jasmine",
"FrameworkVersion": "2",
"Compile": {"Mode": "External"},
"References": [
{
"Path": "../../where_angular_and_other_scripts_are_placed/",
"Includes": [ "angular.js", "*.js" ]
},
{
"Path": "../../where_angular-mocks_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../CommonLibrary/",
"Includes": [ "*.js" ],
"Excludes": [ "*.Spec.js" ]
}
],
"Tests": [
{
"Path": "app/modules/Framework/",
"Includes": [ "*.Spec.js" ]
}
]
}
Another issue with Chutzpah setup is that, it always says that angular is not defined. I have the code below and when I run it it says angular is not defined. If I remove the inject part then it runs. But, I need to mock things. I have the bad feeling the above configuration issue and the stuff below somehow connected.
describe("getActiveModules method", (): void =>
{
var RestangularMock: any;
var angularCommonCheckerService:AngularCommonCheckerService;
var dilibModuleService: IDiLibModuleService;
var $q: ng.IQService;
var allReturnObject: any;
beforeEach((): void =>
{
//#region Arrange
angular.mock.inject(($injector): void => {
$q = $injector.get("$q");
});
RestangularMock = jasmine.createSpyObj("Restangular", ["all", "post"]);
angularCommonCheckerService = new AngularCommonCheckerService();
dilibModuleService = new DilibModuleService(RestangularMock, angularCommonCheckerService);
var returnList: IModuleContract[] = [
<IModuleContract>{ id: 100, isActive: 1 },
<IModuleContract>{ id: 101, isActive: 1 },
];
var allReturnObject = <any>{
getList: (): IModuleContract[]> => {
var deferred = $q.defer();
deferred.resolve(returnList);
return deferred.promise;
}
};
spyOn(allReturnObject, "getList");
//#endregion
});
it("should call Restangular resource with given string", (): void =>
{
RestangularMock.all.and.returnValue(allReturnObject);
dilibModuleService.getActiveModules();
expect(RestangularMock.all).toHaveBeenCalledWith("FrameworkApp/Module/GetActiveModules");
expect(allReturnObject.getList).toHaveBeenCalledTimes(1);
});
Questions:
Why Chutzpah doesn't list tests when the test references listed under "Test"? Did I do something wrong?
Is the issue around inject connected to the configuration issue?
how can I debug Chutzpah and see what is included from the references and tests? It is enough to check the source of the generated html file?

Angular 2 router System is undefined in ES5

I am trying to learn Angular 2 with ES5. But I am stuck at routing. I followed the tutorial in angular.io and added the following scripts in my index.html -
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
It worked all fine until I tried adding
<script src="node_modules/angular2/bundles/router.dev.js"></script>
After adding this I get the following error
System is undefined
I can see that router.dev.js uses System variable which is not defined.
How can I solve this?
After adding
<script src="node_modules/systemjs/dist/system.src.js"></script>
I am getting the following error -
EXCEPTION: No provider for Route! (class3 -> Route)
main.js
(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS]);
});
})(window.app || (window.app = {}));
app.component.js
(function (app) {
//Heroes Detail Component
app.HeroDetailComponent = ng.core.Component({
selector: 'my-hero-detail',
templateUrl: 'hero-detail.html',
inputs: ['hero']
}).Class({
constructor: function () {
}
});
//Heroes Component
app.HeroesComponent = ng.core.Component({
selector: "my-heroes",
templateUrl: 'heroes.html',
styleUrls: ['style.css'],
directives: [app.HeroDetailComponent]
}).Class({
constructor: [app.HeroService, function (_heroService) {
this.title = 'Tour of Heroes';
this._heroService = _heroService;
}],
ngOnInit: function () {
this.getHeroes();
},
onSelect: function (hero) {
this.selectedHero = hero;
},
getHeroes: function () {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
});
//App Component
app.AppComponent = ng.core.Component({
selector: 'my-app',
templateUrl: 'app.html',
directives: [app.HeroesComponent, ng.router.ROUTER_DIRECTIVES],
providers: [app.HeroService]
}).Class({
constructor: [ng.router.Route, function (_router) {
this.title = 'Tour of Heroes';
this._router = _router;
}]
});
//Route config
app.AppComponent = ng.router.RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: app.HeroesComponent
}
])(app.AppComponent);
})(window.app || (window.app = {}));
app.service.js
(function (app) {
app.HeroService = ng.core.Class({
constructor: function () {
this.HEROES = [
{ "id": 11, "name": "Mr. Nice" },
{ "id": 12, "name": "Narco" },
{ "id": 13, "name": "Bombasto" },
{ "id": 14, "name": "Celeritas" },
{ "id": 15, "name": "Magneta" },
{ "id": 16, "name": "RubberMan" },
{ "id": 17, "name": "Dynama" },
{ "id": 18, "name": "Dr IQ" },
{ "id": 19, "name": "Magma" },
{ "id": 20, "name": "Tornado" }
];
},
getHeroes: function () {
return Promise.resolve(this.HEROES);
},
getHeroesSlowly: function () {
return new Promise(resolve =>
setTimeout(() => resolve(this.HEROES), 2000) // 2 seconds
);
}
});
})(window.app || (window.app = {}));
I am trying to convert the Heroes Tutorial in ES5 from angular.io.
TL;DR/Solution
ES5 or angular2-all.umd.js doesn't require router.dev.js
Error was caused by misspelling. ng.router.Route should be ng.router.Router
You should try to include SystemJS in your HTML entry file:
<script src="node_modules/systemjs/dist/system.src.js"></script>
That said, I used routing with ES5 (see this plunkr: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info) but I didn't need to include the router.dev.js. The latter is for Angular2 applications written TypeScript or ES6 applications...

Uncaught Rally.data.ModelFactory.getModel(): Could not find registered factory for type: milestone

Trying to display Milestone for each release, but when trying to create DataStore for Milestone getting error
Uncaught Rally.data.ModelFactory.getModel(): Could not find registered factory for type: milestone
below is my code any ideas or suggestions on this
_getMileStones: function(startDate, endDate, project_id) {
var startDateFilter = Ext.create('Rally.data.QueryFilter', {
property: 'TargetDate',
operator: '>',
value: startDate
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '<',
value: endDate
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '!=',
value: null
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '!=',
value: null
});
var filters = startDateFilter;
Ext.create('Rally.data.wsapi.Store',{
model: 'milestone',
autoLoad: true,
filters: filters,
context: {
project: project_id,
projectScopeDown: true,
projectScopeUp: false
},
fetch: ['Name','FormattedID','DisplayColor'],
listeners: {
load: function(store,records) {
console.log("records values", records);
}
}
}, this);
},
The current stable rc3 release candidate of AppSDK2 predates milestones. They are not available in rc3. When I use rc3 I get the same error you get. If I switch to "x", in the app's config file, and use rab build to rebuild the app, the error goes away:
{
"name": "myapp",
"className": "CustomApp",
"server": "https://rally1.rallydev.com",
"sdk": "x",
"javascript": [
"App.js"
],
"css": [
"app.css"
]
}
Generally it is not recommend using "x" because it is constantly changes. It is not a stable version. But as long as you know that, you may use "x". The AppSDK next release may not be too far in the future, and it will include support for Milestones.
UPDATE: AppSDK2.0 GA has not been announced yet, but it is expected to be released soon. If you use "sdk":"2.0" you get Milestone data.
"x" returns Milestones, but it is a head version that is subject to constant changes. 2.0rc3 does not have Milestones.
You may choose to use 2.0 even though it is not formally available yet.
This app example:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.wsapi.Store',{
model: 'milestone',
autoLoad: true,
fetch: ['Name'],
listeners: {
load: function(store,records) {
console.log("records values", records);
}
}
}, this);
}
});
Along with this config:
{
"name": "milestones",
"className": "CustomApp",
"server": "https://rally1.rallydev.com",
"sdk": "2.0",
"javascript": [
"App.js"
],
"css": [
"app.css"
]
}
will return milestone data:

404 Not Found configure view in backbone router

Here is the structure of my project
Then I configured in router :
define([
'jquery',
'backbone',
'router',
'views/Service/Service'
], function($,
Backbone,
Router,
Service
This is main.js :
requirejs.config({
enforceDefine: true,
paths: {
"webconfig" : "libs/scripts/WebConfig",
"jquery": "libs/jquery/jquery-min",
"underscore": "libs/underscore/underscore-min",
"backbone": "libs/backbone/backbone-min",
"localStorage" : "libs/backbone/backbone.localStorage-min",
"reveal":"libs/jquery/jquery.reveal",
"jquery.pnotify" : "libs/jquery/jquery.pnotify.min",
"text" : "text",
"ice" : "libs/scripts/ice",
"cart" : "libs/scripts/Cart",
"wishlist" : "libs/scripts/WishList",
"user" : "libs/scripts/Customer",
"content" : "libs/scripts/Content",
"item" : "libs/scripts/Item",
"service" : "libs/scripts/Service",
"rewardcart" : "libs/scripts/RewardCart",
"recentlyviewed" : "libs/scripts/RecentlyView",
"msgbox" : "libs/scripts/msgbox",
"navigator" : "libs/scripts/Navigator",
"quotation" : "libs/scripts/Quotation",
"websitetracking" : "libs/scripts/WebsiteTracking",
"select2" : "libs/jquery/select2",
"jquery-menu-aim" : "libs/jquery/jquery.menu-aim",
"bootstrap" : "libs/jquery/bootstrap.min",
"jssor" : "libs/jquery/jssor.slider.min"
},
shim: {
"webconfig" : {
exports : "forMainRequireJS"
},
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"reveal": {
deps: ["jquery"],
exports: "jQuery.fn.reveal"
},
'jquery.pnotify': ["jquery"],
"ice" : {
//deps: ["jquery"],
exports: "getItemIndexById"
},
"cart" : {
exports : "Cart"
},
"wishlist" : {
exports : "WishList"
},
"user" : {
exports : "Customer"
},
"item" : {
exports : "Item"
},
"content" : {
exports : "Content"
},
"service" : {
exports : "Service"
},
"rewardcart" : {
exports : "RewardCart"
},
"recentlyviewed" : {
exports : "RecentlyView"
},
"msgbox" : {
exports : "messageBox"
},
"navigator" : {
exports : "Navigator"
},
"quotation" : {
exports : "Quotation"
},
"websitetracking" : {
exports : "WebsiteTracking"
},
"select2" : {
exports : "Select2"
},
"jquery-menu-aim" : {
deps: ["jquery"] ,
exports: "jQuery.fn.menuAim"
},
"bootstrap": {
deps: ["jquery"],
exports: "jQuery.fn.popover"
},
"jssor" : {
exports : "$JssorSlider$"
}
}
});
define(["app"] , function(App){
App.initialize();
});
I got NetworkError: 404 Not Found - http://localhost/source/webcore/Service.js" error.
What did I wrong here?
Thanks for your answer.

How to use jsTree events with AngularJS

I load my tree successfully using a directive in AngularJS.Now i want to add events (here select node) in my tree, so i did like this. but i can't see my alert .
My code:
app.directive('jstree', function() {
return {
restrict: 'A',
scope: {
jstree: '='
},
link: function(scope, element, attrs)
{
scope.$watch('jstree', function()
{
$(element).jstree({
"json_data" :{
"data":scope.jstree.data
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"plugins" : [ "themes", "json_data" ]
}, false);
}, true);
// select a node
element.bind("select_node.jstree",function(e, data) {
$window.alert(e.data);
});
}
};
});
Any idea were i went wrong ?
To use events in jstree, you have to add "ui" in this line :
"plugins" : [ "themes", "json_data", "ui" ]
Now it works.
Looking at the jstree demo, you'll want to call bind on the jstree object, not on the element (you'll be able to bind to click on the element, but this probably isn't what you want)
$(element)
.jstree({
"json_data" : {
"data" : scope.jstree.data
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"plugins" : ["themes", "json_data"]
}, false)
.bind('select_node.jstree', function(ev,data) {
console.log('clicked');
});

Resources