I'm trying to use Bootstrap after loading it by RequireJS. Tried almost everything but still getting: Uncaught TypeError: $(...).modal is not a function
config:
require.config({
paths: {
jquery: 'vendor/jquery-1.10.2.min',
underscore: 'vendor/lodash',
backbone: 'vendor/backbone.min',
text: 'vendor/plugins/text',
bootstrap: 'vendor/bootstrap.min'
},
shim: {
bootstrap: {deps : ['jquery'], exports: '$'}
}
});
require([
'app',
'bootstrap'
], function(App){
App.initialize();
});
file that is supposed to use modal()
define([
'jquery',
'underscore',
'backbone',
//...
'bootstrap'
], function($, _, //...
){
//.......
renderPlaceForm: function(e) {
e.preventDefault();
$('#place-modal').modal('show');
}
//.....
I also tried omitting the "exports", loading bootstrap in App is also one of my tries. What is wrong?
Check if it will work with jQuery(...).modal. your jQuery may be in compatability mode, also check if jQuery and bootstrap are not included twice.
Related
My jQuery library is getting loaded, but I'm getting an undefined error for any other modules I'm importing. Most of them have a jQuery dependency, which I shim in. Can anyone tell me why all my other modules are undefined?
requirejs.config({
baseUrl: 'js',
shim: {
'jqueryui': ['jquery'],
'dynatree': ['jquery'],
'noty' : ['jquery']
},
paths: {
jquery: 'vendor/jquery',
jqueryui: 'vendor/jqueryui',
dynatree: '../includes/dynatree/jquery.dynatree.min',
jsPlumb: '../includes/jsPlumb/dist/js/jquery.jsPlumb-1.5.5-min',
noty: '../includes/noty/packaged/jquery.noty.packaged.min'
}
});
requirejs(['jquery', 'jqueryui', 'dynatree', 'jsPlumb', 'noty'],
function ( $, jqueryui, dynatree, jsPlumb, noty ) {
console.log('hello', $, noty, jsPlumb, dynatree);
});
jquery ui doesn't export anything, it uses the same jquery symbol. I'd say the same applies for the rest of the libraries.
Even in the case they'd export something, it won't work because you're not setting the export symbol for your shims. Here you have an example of a shim with export
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
}
I'd replace your code by
requirejs(['jquery', 'jqueryui', 'dynatree', 'jsPlumb', 'noty'],
function ($) { // $ is the only symbol that needs to be used
});
My requirejs config file looks correct to me. But when I get into my function to fire up my application, I only have access to jQuery. Could someone look at my config file and tell me what I am doing wrong? Why can't I see Backbone or Underscore and why can I see jQuery? Here is my config file:
require.config({
paths: {
jquery: "libs/jquery/jquery",
underscore: 'libs/underscore/underscore',
backbone: "libs/backbone/backbone"
},
shims: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
'use strict';
debugger;
});
Thanks for the help.
I think you have shims instead of shim in singular, changing it should fix your issue.
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
}
The versions of underscore and backbone you are using are not AMD compliant, so they don't return in the way require.js needs them to. You can just leave them off of your function params and they will be available on the global scope. Otherwise, you are passing undefined into your function as the value of _ and Backbone.
require(['jquery', 'underscore', 'backbone'], function() {
console.log($);
console.log(_);
console.log(Backbone);
});
I'm getting Model not defined error with below code. I've added underscore, jquery, backbone etc but I can only get object returned with console.log function for jquery only $
Is there a reason why other objects are not returning inside define function?
Below is my code from main.js:
require.config({
paths: {
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min',
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
bootstrap: '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min',
qunit: '//cdnjs.cloudflare.com/ajax/libs/qunit/1.11.0/qunit.min',
bootstrapDatepicker: '/js/bootstrap-datepicker',
backboneValidation: '//cdnjs.cloudflare.com/ajax/libs/backbone.validation/0.7.1/backbone-validation-min'
}
});
define([
'jquery',
'underscore',
'backbone',
'bootstrap',
'qunit',
'bootstrapDatepicker',
'backboneValidation'
], function($, _, Backbone, Bootstrap, Qunit, Datepicker, backboneValidation){
$(function(){
var ReportModel = Backbone.Model.extend({
validation: {
'date.from': {
required: true,
msg: 'Please enter a from date'
},
'date.to': {
required: true,
msg: 'Please enter a to date'
}
},
initialize: function(){
console.log('test');
}
});
$('#dp3').datepicker().on('changeDate', function(e){
$('#toDate').datepicker('setStartDate', new Date(e.date.valueOf()));
});
$('#dp4').datepicker().on('changeDate', function(e){
$('#fromDate').datepicker('setEndDate', new Date(e.date.valueOf()));
});
});
});
Use shim config: http://requirejs.org/docs/api.html#config-shim. Example:
requirejs.config({
paths: {
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min',
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
},
shim: {
backbone: {
//These script dependencies should be loaded before loading backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
underscore: {
exports: '_'
},
}
});
Unfortunately Backbone.js isn't AMD enabled but you can use amdjs to do it.
This tutorial will use Require.js to implement a modular and organized Backbone.js.
http://backbonetutorials.com/organizing-backbone-using-modules/
I'm new to Require.js, and I'm trying to do something which I thought would be simple but is starting to be a pain.
I'm trying to define a global namespace for my Backbone application, and load it as a module. Here is my namespace (main.js):
define(
['jquery',
'underscore',
'backbone',
'GlobalRouter'
],
function($, _, Backbone) {
var App= {
Models: {},
Views: {},
Collections: {},
Routers: {},
init: function() {
new App.Routers.GlobalRouter();
Backbone.history.start();
}
}
return App;
});
and here is my config.js file:
require.config({
// your configuration key/values here
baseUrl: "js", // generally the same directory as the script used in a data-main attribute for the top level script
paths: {
'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
'underscore': 'vendor/underscore-min',
'backbone': 'vendor/backbone-min',
'marionette': 'vendor/backbone.marionette',
'main' : 'main'
}, // set up custom paths to libraries, or paths to RequireJS plugins
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'main' : {
deps: ['underscore', 'jquery', 'backbone', 'GlobalRouter'],
exports: 'TEWC'
}
} // used for setting up all Shims (see below for more detail)
});
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
$(function() {
App.init();
});
}
);
and for good measure, here is my router:
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, TEWC) {
TEWC.Routers.GlobalRouter = Backbone.Router.extend({
routes: {
"" : "index",
"documents/:id" : "edit",
"login" : "login"
},
edit: function(id) {
alert('edit')
},
index: function() {
alert('index')
},
login: function() {
alert('login')
}
});
});
In the past, I was getting a 'app is undefined error'. Now, I get a load timeout error after a few minutes that says this:
Uncaught Error: Load timeout for modules: main
However, the alert doesn't fire, and main.js doesn't seem to get loaded, but I believe router does, and it doesn't bark that TEWC is undefined -- so it may be loading even though it's not in my Network tab?
This is probably a rookie question -- does anyone have any insight on this?
The following code does not define GlobalRouter yet it get's passed to the define callback
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
$(function() {
App.init();
});
}
add GlobalRouter to define
Secondly, when it fails to load main ..can you check from console what URL it is trying to access? It most probably is a mis-configuration.
If I'm not mistaken your problem is that in config.js, after the require.config(), your define() should be a require() instead.
Explaining further. You currently have:
define([
'jquery',
'underscore',
'backbone',
'main'
...
This define should be a require because this is code you want executed; it is not a module definition.
This and of course the missing GlobalRouter dependency as noted earlier.
paths: {
jquery: 'libs/jquery/jquery-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-optamd3-min',
handlebars: 'libs/handlebars/handlebars',
text: 'libs/require/text'
}
define([
'jquery',
'underscore',
'backbone',
'collections/todos',
'views/todos',
'text!templates/stats.html',
'common',
'handlebars'
], function ($, _, Backbone, Todos, TodoView, statsTemplate, Common, handlebars) {
//handlebars is null
console.log("handlebars is",handlebars);
})
Except handlebars,others can load successfully.Why and how to make handlbars load successfully.thanks
Firstly, I can see that you're new but please try to add more detail to your question to help others help you.
From glancing at the source I don't think Handlebars is compatible with AMD, therefore you will need to shim it yourself. Something like this:
requirejs.config({
shim: {
'handlebars': {
exports: 'Handlebars'
}
}
});