I previously asked this question, and got one plug-in to work. Now, I'm trying to get another plug-in to work using the solution for the first plug-in, but that solution isn't working.
I'm trying to get this plug-in to work, but the chrome console spits out this error:
Uncaught ReferenceError: jQuery is not defined :3000/js/libs/textarea_auto_expand.js:41
My code is this:
require.config({
paths: {
jquery: '/js/libs/jquery/jquery-2.0.3',
underscore: '/js/libs/underscore/underscore-min',
backbone: '/js/libs/backbone/backbone-min',
//text: '/js/libs/text'
templates: '../templates'
,sockets: '/socket.io/socket.io'
,rangyInputs: '/js/libs/rangyinputs-jquery-1.1.2'
, textareaAutoExpand: 'js/libs/textarea_auto_expand'
},
shim: {
'Backbone': ['Underscore', 'jQuery'],
'sockets': {exports: 'io'},
'rangyinputs-jquery': {deps: ['jquery'], exports: '$'},
'textarea_auto_expand': {deps: ['jquery'], exports: '$'}
}
});
require(['jquery', 'router', 'libs/a_myLib/keydownHandler', 'libs/textarea_auto_expand' ],
function($, router, keydownHandler, ta_ae){
$("body").on("keydown", "textarea", keydownHandler);
router.initialize();
$("textarea").textareaAutoExpand();
})
The problem is that, you used path name jquery, but specified jQuery in you Backbones deps:
'Backbone': ['Underscore', 'jQuery'],
Again, here is working example of main.js
index.html
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
main.js
require.config({
paths : {
jquery : 'jquery-2.0.3',
'rangyinputs-jquery' : 'rangyinputs-jquery-1.1.2',
textareaAutoExpand: 'js/libs/textarea_auto_expand'
},
shim : {
'rangyinputs-jquery' : {deps : ['jquery'], exports : '$'},
'textarea_auto_expand': {deps: ['jquery'], exports: '$'}
}
});
require(['jquery', 'rangyinputs-jquery', 'textarea_auto_expand'], function($) {
console.log('Type of $.fn.textareaAutoExpand ' + typeof $.fn.textareaAutoExpand );
var t = $('<textarea/>').textareaAutoExpand();
$('body').append(t);
});
Related
How do you load other extensions for a jquery control called 'fancytree' I'm trying to get fancytee to load or include the fancytree.table.js and other extensions that are needed - below is my config
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-ui': {
exports: "$",
deps: ['jquery']
},
'fancytree': {
deps: ['jquery-ui']
},
'alertify': {
deps: ['jquery']
},
'fancytreetable': {
deps: ['jquery', 'fancytree']
}
},
paths: {
'jquery': '../lib/jquery/jquery',
'underscore': '../lib/underscore/underscore',
'backbone': '../lib/backbone/backbone',
'text': '../lib/text/text',
'jquery-ui': '../vendor/jquery-ui/jquery-ui',
'fancytree': [
'../vendor/fancytree/fancytree',
'../vendor/fancytree/fancytree.table'/* this extension here needs to be added but it's not included */
],
'alertify': '../vendor/alertify/alertify'
},
baseUrl: '/js/app',
});
Nikhil Mehta's comment points you in the right direction. Your paths value for fancytree is wrong. You use an array there when you want to provide fallback values for modules. If you give [A, B, C], for instance, if A fails to load, RequireJS tries B and if this fails, tries C. And if all fail, then that's a load failure.
Based on the configuration you show, you'd need:
fancytree: '../vendor/fancytree/fancytree',
fancytreetable: '../vendor/fancytree/fancytree.table'
You already have a shim that establishes that fancytreetable needs fancytree.
Note that unless you are using fairly old versions of Underscore and Backbone, you do not need to specify shim values for them. RequireJS is probably going to just ignore them but it may confuse people reading your code.
Here is how made it work, requirejs with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.
onBuildWrite is optional but i prefer it this way
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery-ui': './js/vendor/jquery-ui',
'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
},
shim: {
'jquery.fancytree': {
deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
exports: 'jQuery.fn.fancytree'
}
},
onBuildWrite: function (moduleName, path, contents) {
'use strict';
if (moduleName === 'jquery.fancytree') {
contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
}
return contents;
}
});
// usage
define([
'jquery',
'jquery.fancytree',
'css!./css/fancytree/skin-custom/ui.fancytree.css',
],
function($) {
'use strict';
//
$('#tree').fancytree({
checkbox: true,
source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
});
//
});
//
I recently worked on a web app, and i wanted to separate it into modules.
I searched and found out that RequireJs is the best for this. I read the doc, and some tutorials about it and came up with this
requirejs.config({
baseUrl: "js/lib",
shim: {
'jquery-1.12.1.min': ['jquery-1.12.1.min'],
'materialize.min': ['materialize.min'],
'knockout-3.4.0': ['knockout-3.4.0'],
'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
},
waitSeconds: 0,
paths: {
'jquery-1.12.1.min': 'jquery-1.12.1.min',
'materialize.min': 'materialize.min',
'knockout-3.4.0': 'knockout-3.4.0',
'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
}
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }
My index has the following:
<script data-main="js/main" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/converter.js"></script>
But it seems that my Jquery, KO, materialize.css and pouchdb aren't loading as i see on my chrome dev tools in Network:
I also read about the shim config how to set up the dependences and i want them in that order. I don't really know what am i missing, any help would really be appreciated.
Folder structure is:
js:
lib:
->jquery-1.12.1.min.js
->knockout-3.4.0.js
->pouchdb-5.3.0.min.js
->materialize.min.js
->require.js
main.js
converter.js
Ok it seems require and materialze.css have a problem with hammer.js, what i recommend is you go and download Hammer.min.js and include it in your lib folder.
Then in your main.js add the following:
requirejs.config({
baseUrl: 'js/lib',
waitSeconds: 0,
paths: {
app: '../app',
jquery: 'jquery-1.12.1.min',
materialize: 'materialize.min',
knockout: 'knockout-3.4.0',
pouchdb: 'pouchdb-5.3.0.min',
hammer: 'hammer.min'
},
shim: {
hammer: {
deps: ['jquery']
},
pouchdb: {
deps: ['jquery']
},
knockout: {
deps: ['jquery'],
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer'],
},
jquery: {
exports: '$'
}
}
});
You include you hammer and also the dependency for jquery on it. And i see that you didn't put the PouchDb object in the function:
define(["jquery", "knockout", "pouchdb", "materialize" ], function($, ko, PouchDB) {...
Hope this helps
Using path, requirejs replace module id prefixes (name in config) with the corresponding value.
Using shim you can export a global variable and configure the dependencies ( materialize depends jquery so you have to import jQuery before importing materialize.js )
requirejs.config({
baseUrl: "js/lib",
waitSeconds: 0,
paths: {
'jquery': 'jquery-1.12.1.min',
'materialize': 'materialize.min',
'knockout': 'knockout-3.4.0',
'pouchdb': 'pouchdb-5.3.0.min',
'hammer': 'hammer.min',
},
shim: {
pouchdb: {
deps: ['jquery']
},
knockout: {
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer']
},
jquery: {
exports: '$'
}
}
});
require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
console.log($);
console.log(ko);
});
I am trying to load JQuery datatables with Require.js
This is my JS module where I would like to use datatables :
define([
"jquery",
"text!orders_list.tpl",
"dataTables"
], function($, OrdersListTemplate, dataTables)
{
console.log($);
console.log($.fn.dataTable);
... more logic after
How I call my JS module in HTML :
require(['./js/config'], function (common)
{
require(
[
'js/modules/init',
...
'js/modules/orders_list.js'
],
function (init, ..., orders_list)
{
init.initialize();
...
orders_list.initialize();
});
});
How I have defined my config :
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
...
},
paths: {
jquery: '../../shops_common/js/lib/jquery-1.9.1',
backbone: '../../shops_common/js/lib/backbone.min',
underscore: '../../shops_common/js/lib/underscore.min',
dataTables: 'http://datatables.net/download/build/nightly/jquery.dataTables'
},
waitSeconds: 300
});
But $.fn.dataTable is always undefined...
Any idea why?
Thanks.
I found the solution after extensive research: Datatables is a named module you must use the name "datatables" in your require
I have a demo site running on EC2 and I pushed a version of the AngularJS app and now everything seems broken. I'm using AngularJS 1.2 and RequireJS 2.1. I have a modules/main_prod.js file. It looks like this:
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../js3p/jquery',
'jquery-ui': '../js3p/jquery-ui',
'jquery.ui.widget': '../js3p/jquery.ui.widget',
'bootstrap': '../js3p/bootstrap',
'angular': '../js3p/angular',
'angular-sanitize': '../js3p/angular-sanitize',
'ngUi': '../js3p/angular-ui',
'ui.bootstrap': '../js3p/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../js3p/calendar',
'angular-ui-router': '../js3p/angular-ui-router',
'uikeypress': '../js3p/keypress',
'dtPicker': '../js3p/bootstrap-datetimepicker.min',
'fileUpload': '../js3p/jquery.fileupload',
'fullcalendar': '../js3p/fullcalendar',
'iframeTransport': '../js3p/jquery.iframe-transport',
'lodash': '../js3p/lodash',
'moment': '../js3p/moment',
'restangular': '../js3p/restangular',
'typeahead': '../js3p/typeahead'
},
shim: {
'jquery': { deps: [] },
'jquery-ui': { deps: ['jquery'] },
'jquery.ui.widget': { deps: ['jquery'] },
'bootstrap': { deps: ['jquery'] },
'angular': { deps: ['jquery'], exports: 'angular' },
'angular-sanitize': { deps: ['angular'] },
'ngUi': { deps: ['angular'] },
'ui.bootstrap': { deps: ['angular', 'ngUi'] },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'] },
'angular-ui-router': { deps: ['angular', 'ngUi'] },
'uikeypress': { deps: ['angular', 'ngUi'] },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'] },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'] },
'fullcalendar': { deps: ['jquery', 'jquery-ui'] },
'iframeTransport': { deps: ['jquery', 'jquery-ui'] },
'lodash': { deps: [] },
'moment': { deps: ['jquery'] },
'restangular': { deps: ['angular', 'lodash'] },
'typeahead': {deps: ['jquery', 'bootstrap'] }
},
priority: ['angular']
});
require(['angular',
'angular-ui-router'],
function (angular, routes) {
require(['angular', 'app'], function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I load the page, I see all of these libraries loading. I even see the page load and it looks like half of Angular is working (I see directives filled in and whatnot). Anything subject to a ng-show attribute doesn't seem to work (shown when should be hidden), but my redirect that is within AngularJS does work. Every page load puts this in the console:
Error: [$injector:modulerr] Failed to instantiate module angular due to:
[$injector:nomod] Module 'angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
...
Let me know if more code is needed, I'm happy to provide. I'm at a total loss here.
So I came to find the problem. I'm working from the ngStart seed project and when it does a build for deployment it changes the top of the index.html file:
<!doctype html>
<!--(if target build)>
<html ng-app="angular" manifest="project.manifest">
<!(endif)-->
<!--(if target local)> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!(endif)-->
<head>
This ng-app="angular" is the actual cause of the error message. I removed it and things are behaving as expected.
You can't use angular and requirejs in this way. You need to use Angular ADM
https://github.com/marcoslin/angularAMD
http://www.startersquad.com/blog/angularjs-requirejs/
I am trying to use the backbone-ui library but cannot figure out the require.js configuration to get the modules loaded.
main.js:
requirejs.config({
baseUrl: '/static/js/facebook_report_app/js',
paths: {
backbone: 'lib/backbone'
, underscore: 'lib/underscore'
, jquery: 'lib/jquery'
, laconic: 'lib/laconic'
, moment: 'lib/moment'
, backboneUI: 'lib/backbone-ui/js/backbone_ui'
, menuUI: 'lib/backbone-ui/js/menu'
, textUI: 'lib/backbone-ui/js/text_field'
, text: 'lib/text'
},
shim: {
'lib/underscore': {
exports: '_'
},
'laconic': {
deps: ["jquery"],
exports: "$.el"
},
'lib/backbone': {
deps: ['lib/underscore']
, exports: 'Backbone'
},
'backboneUI': {
deps: ['lib/backbone', 'laconic', 'jquery']
, exports: 'Backbone.UI'
},
'textUI': {
deps: ['jquery', 'lib/backbone', 'backboneUI', 'laconic']
, exports: 'Backbone.UI.TextField'
},
'menuUI': {
deps: ['lib/backbone', 'backboneUI', 'laconic', 'textUI']
, exports: 'Backbone.UI.Menu'
},
'lib/backgrid': {
deps: ['lib/underscore', 'lib/backbone']
, exports: 'Backgrid'
},
'report_app': {
deps: ['lib/underscore', 'lib/backbone', 'lib/backgrid', 'backboneUI']
}
}
});
require([
'facebook_report_app'
],
function(FacebookReportApp) {
window.fbReport = new FacebookReportApp();
});
menu_user.js
define(['jquery', 'lib/backbone', 'backboneUI', 'menuUI', 'laconic'], function(AccountPickerView) {
var AccountPickerView = Backbone.UI.Menu.extend({
el: '.left-nav',
});
return AccountPickerView;
});
When I load this in dev, the console reports "Object [object Object] has no method 'input' ", on line 44 of the text_field.js of the Backbone-UI library.
I suppose my configuration approach is broken to begin with -- I added the menu.js and text_field.js files bc I was getting errors 'Backbone.UI.Menu' and Backbone.UI.TextField' (a requirement of Menu) weren't defined. But there must be a cleaner way to bring in the various files of backbone-ui.
So how do I get rid of the 'no method input' error? Or better configure to use Backbone UI? Or should I be using jQuery UI in the first place? In which case, where do I go to figure out configuration of that?
I got it working, after much fiddling with the following setup:
js/main.js
requirejs.config({
baseURL: 'js',
urlArgs: "bust=" + (new Date()).getTime(),
shim: {
underscore: {
exports: '_'
},
jquery: {
exports: '$'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
laconic: {
exports: '$.el'
},
backbone_ui: {
deps: ['underscore', 'jquery', 'backbone', 'laconic', 'moment'],
exports: 'Backbone.UI'
}
},
paths: {
jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
moment: './lib/moment.min',
laconic: './lib/laconic',
underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
backbone_ui: './lib/backbone-ui',
crypto: 'http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5',
templates: '../templates',
collections: './collections',
models: './models',
}
});
js/views/json.js
define(['jquery','underscore', 'backbone', 'backbone_ui'],
function($,_,Backbone, BBUI){
var JsonView = Backbone.View.extend({
className: "json-item",
initialize: function(data){
var self = this;
this.app = data.app;
this.model = data.model;
this.listenTo(this.model, "change", function(){
console.log("model changed", self.model);
});
this.model.fetch({
success: function(){
self.render();
}
});
},
render: function(){
var self = this;
$(this.el).empty();
for (key in this.model.attributes){
this.el.appendChild(new Backbone.UI.Label({content:key}).render().el);
this.el.appendChild(new Backbone.UI.TextField({model: this.model, content:key}).render().el);
}
this.el.appendChild(new Backbone.UI.Button({content:"save", onClick: function(){self.model.save()}}).render().el);
return this;
}
});
return JsonView;
});
Please note that I import backbone-ui as BBUI and never reference it that way. BBUI.TextField() is a defined function and using it would work as well, but the way Backbone-ui is set up it makes alterations to Backbone, Jquery, and Underscore when it loads. So I figured I just needed it to be run prior to the view getting loaded.