I'm trying to bring toastr into my application. I've done something very simple:
bundles.Add(new ScriptBundle("~/Content/example-scripts").Include(
"~/Areas/Examples/Scripts/vendor/*.js"
));
Where that folder contains toastr.js. And then in my view:
#Scripts.Render("~/Content/example-scripts")
I see toastr getting loaded in Chrome, yet when I call toastr from my viewmodel:
$(document).ready(function () {
toastr.success('sup');
ko.applyBindings(new ViewModel());
});
I get the following errors:
Uncaught Error: Mismatched anonymous define() module: function ($) {
return (function () {
var version = '2.0.1';
var $container;
var listener;
var toastId = 0;
var toastType = {
error: 'error',
info: 'info',
success: '...<omitted>...ch require.js:166
Uncaught ReferenceError: toastr is not defined sampleVm.js:36
What am I doing wrong?
It seems you are using require.js because the error message is coming from it.
And the Mismatched anonymous define() module means that toaster.js was defined as an anonymous module but it was not loaded through require.js module loading mechanism.
So there is two solution for this in your case:
If you are using require.js, use that to load toaster.js
If it was not intended to use require.js, just remove the reference from your page and toaster.js will load just fine
Related
I'm making a Chrome extension and therefore trying to use require.js, but unsuccessful to "require" the first file to be load.
What i am doing wrong?
Project details
Error:
Project structure:
app.js:
var jq = $.noConflict(true);
function docReady() {
requirejs.config({
baseUrl: 'app',
paths: {
}
});
require(['core'], function(core) {
core.log();
});
}
jq(document).ready(docReady);
core.js:
define(function () {
var methods = {};
methods.log = function() {
console.log('testing...');
}
return methods;
});
Yes, i do load require.js in content_scripts inside the manifest.json, before loading app.js
I'm trying to do something simple as displaying a console.log from my second file, but after so many tries idk what to do.
May someone help me?
Your manifest needs to loading the core.js before or after the content load event
My setup so far:
<script src="/common/js/require.configure.js"></script>
<script src="/common/js/lib/require.js" data-main="/common/js/app.js"></script>
require.configure.js
var require = {
baseUrl: '/',
paths: {
"jquery": "/common/js/lib/jquery",
"fastclick": "/common/js/lib/fastclick",
"knockout": "/common/js/lib/knockout",
"common": "/common/js/scripts/common"
}
};
The top three paths are obviously just libraries that I am using for my application. The last file "common" is a collection of functions that are global to my application such as opening the main menu, giving messages to the user, or binding handlers, etc.
app.js
define(["jquery", "knockout", "fastclick", "common"], function (){
});
I know that requireJS always needs a data-main file to run initially. But what does this above code really do? I trying to follow tutorials online but it is not helping. I'm guessing that by defining those strings in the array, it looks it up in the configuration file and is loading in those files, but how are those files then accessed or used? I'm guessing that I can simply then just "require" those same strings and they will be available to me in my functions?
common.js (simplified for Stack Overflow)
require(["knockout"], function (ko) {
var appViewModel = {};
appViewModel.loaded = ko.observable(false);
});
By wrapping everything in the require() I think that this is injecting the dependencies of needing knockout.
App's First Page - login.html (simplified for S.O.)
In the first page of the app, I define a <script> tag with the following
require(["jquery", "knockout", "fastclick", "common"], function ($, ko, FastClick)
{
$(function(){
appViewModel.loginData = {
email : ko.observable(),
password : ko.observable()
};
});
});
And the resulting error when trying to run is that
Uncaught ReferenceError: appViewModel is not defined
despite the fact that I have included "common" in the require([]).
What am I missing here? I think that I may be completely misunderstanding what "require" and "define" do in requireJS, so that would be a good basis of an answer for me.
i think you want to do something like that:
Modules that define global obj
require(["knockout"], function (ko) {
window.appViewModel = {};
window.appViewModel.loaded = ko.observable(false);
});
Modulw that popule the obj:
require(["jquery", "knockout", "fastclick", "common"], function ($, ko, FastClick)
{
window.appViewModel.loginData = {
email : ko.observable(),
password : ko.observable()
});
It says here(http://ace.c9.io/#nav=embedding) just copy one of src* subdirectories somewhere into your project
I have put it in mykeystoneapp/public/js(my default home is mykeystoneapp/public)
Here are the errors I get:
1.Uncaught TypeError: $.cookie is not a function(ui.js:8)
2.Uncaught Error: Missed anonymous define() module: function …(require.js:141)
http://requirejs.org/docs/errors.html#mismatch
Here is my Jade code:
script(src='/js/ace/demo/kitchen-sink/require.js')
script.
require.config({paths: {ace: "/js/ace/build/src"}});
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor_container");
editor.setTheme('eclipse');
editor.session.setMode('javascript');
require(["/js/ace/lib/ace/requirejs/text!src/ace"], function(e){
editor.setValue(e);
})
});
require(['testace']);
Secondly if I put debugger in EventEmitter(https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L3300)
I can see it’s properly reaching EventEmitter._dispatchEvent with
eventName=‘changeMode’ but it returns without any operation as there are no !listeners or defaultHandler
editor.session.setMode('javascript'); is wrong, it should be editor.session.setMode('ace/mode/javascript'); instead. Same for theme which is supposed to be ace/theme/eclipse.
error in ui.js is not related to ace, since ace doesn't have a file named ui.
I have defined class Media as:
class LtAdmin(admin.ModelAdmin):
form = LtForm
class Media:
js = ('javascript/lt/showhid_follow_up.js',)
This javascript code lies in django project folder:
/home/myself/mysite/static/javascript/lt/showhid_follow_up.js
settings.py contains:
STATIC_URL = '/static/'
Javascript is as follows:
jQuery(document).ready(function($){
alert('Hi');
});
Do I have to define MEDIA_URL to use this? Do I have to have a src in the javascript? If I add and , it displays error:
Uncaught SyntaxError: Unexpected token <
On removing this, error I get:
Uncaught TypeError: Property 'jQuery' of object [object Object] is not
a function
How do I resolve this problem? I have tried using FireFox as well as Chrome browsers
Am I missing some other settings?
jQuery is included already in Django admin, it's just under the django namespace. Passing in django.jQuery using an immediately invoking function allows you to use the more familiar $ shortcut instead of having to write django.jQuery all the time.
(function($) {
$(function() {
alert('Hi');
});
})(django.jQuery);
I'm new to requirejs and I have a problem loading dropzonejs (http://www.dropzonejs.com/) as an AMD .
My requirejs config is:
requirejs.config({
baseUrl: 'js/MV'
,paths: {
,jquery: '../libs/jquery-latest'
handlebars: '../plugins/handlebars'
,scrolltofixed: '../plugins/scrolltofixed'
,logout: '../logout'
,dropzone: '../plugins/dropzoneAmdModule'
}
});
When I try to load the dropzone module with
function _activateDropzone(){
require(['dropzone'], function(dropzone){
var pippo = new Dropzone({ //..config
});
});
}
it logs
Uncaught ReferenceError: Dropzone is not defined
even if I'm loading the dropzone-amd-module .
Any advice?
With RequireJS you have to use the return value in the callback function. In your example you are using dropzone (lower case) as the module return value, but in the code you then use Dropzone (upper case). I think this should work:
function _activateDropzone(){
require(['dropzone'], function(Dropzone){
var pippo = new Dropzone({ //..config
});
});
}
dropzone-amd-module is detecting that is is being used within AMD loader and instead of adding Dropzone to the global scope it returns a local value to the module loader.