We Keep Coding

systemjs auto load plugins after jquery

I am trying to get a handle on systemjs, and understand how to load dependencies: ie load these scripts before this script loads, however I am stuck on doing the reverse...
I have a set of default jQuery plugins that I always want loaded after jQuery is loaded. Is there a way to set this up in the systemjs config so that I always have my plugins loaded when jQuery is loaded? These would need to be loaded after jQuery loads and not before.
Current systemjs config file
System.config({
//defaultJSExtensions: true,
//Create new header in WebExchange to load this beast..
baseUrl: WE_CONTEXT + '/assets',
map: {
css: 'css.js',
//Map JQuery
'jquery': 'https://code.jquery.com/jquery-1.11.0.min.js',
//Begin DataTables
'dataTables': 'https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js',
'dataTablesCss': 'https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css',
'dataTablesButtonPlugin': 'https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js',
'dataTablesButtonBootstrapPlugin': 'https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.min.js',
'dataTablesColSearchPlugin': 'plugins/datatables/datatables.colsearch.plugin.js',
'dataTablesResponsivePlugin': 'plugins/datatables/dataTables.responsive.js',
'dataTablesResponsiveCss': 'https://cdn.datatables.net/responsive/2.0.0/css/responsive.dataTables.min.css',
'dataTablesButtonCss': 'https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css'
//End
},
meta: {
'*.css': {loader: 'css'},
'jQuery' : {
'deps' : []
},
'dataTables': {
//Dependecies to load before module i.e DataTables
'deps': ['dataTablesCss', 'jquery', 'dataTablesColSearchPlugin', 'dataTablesResponsivePlugin', 'dataTablesResponsiveCss']
},
'dataTablesButtonPlugin': {
'deps': ['dataTablesButtonBootstrapPlugin', 'dataTablesButtonCss']
}
},
bundles: {
'jquery': ['dataTables']
//'datatablesCss' : ['dataTables']
}
});

You could try a construct with setTimout, like this:
function waitJQuery () {
if(!window.jQuery) {
setTimeout(() => waitJQuery , 200);
} else {
execute();
}
}
function execute () {
// your code here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
You check if JQuery is there, if not you execute the waitJQuery again.

I need to make sure that a plugin will not load until its dependency loads using RequireJS

I am using the jquery.validationEngine.js plugin.
jqueryValidateEnglish cannot run unless jqueryValidateEngine is loaded first.
My jquery.wrapped.validationEnglish2.js is coded like the following:
define(['jqueryValidateEngine'],function($){
//Plugin Code here
});
My jquery.wrapped.validationEngine2.js is coded like the following:
define(['jquery'],function($){
//Plugin Code here
});
My homepage contains:
<script src="/imagesrv/marketing/requireJS/assets/lib/require.js" data-main="/imagesrv/marketing/requireJS/assets/js/common2">
common2.js Contains:
//Configure RequireJS
require.config({
baseUrl: "/imagesrv/marketing/requireJS/assets",
paths: {
// The libraries we use
jquery: [
'/imagesrv/marketing/js/jquery.min'
],
bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
main: '/imagesrv/marketing/requireJS/assets/page/main',
startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2',
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2'
}
});
require(['main', 'bootstrap', 'startupkit', 'eloquatag', 'owlcarousel', 'kiblog', 'jqueryuicus', 'jqueryValidateEnglish'], function($) {// Load up this pages script, once the 'common' script has loaded
console.log('jQuery and r.js have been loaded!');
});
But I keep getting the following error in the console when I run my page:
"$(...).validationEngine is not a function
When I look under Network it shows that my wrapped plugins are loading but for some reason it seems like they must be loading out of order which is probably why I am getting the console error.
I am not sure what the issue is.

If jQuery loaded first , could utilize $.holdReady() , $.when()
$.holdReady(true);
var scripts = {
bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
main: '/imagesrv/marketing/requireJS/assets/page/main',
startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
// load `jquery.wrapped.validationEngine2` before `jquery.wrapped.validationEnglish2`
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2',
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2'
};
var requests = $.when.apply($, $.map(scripts, function(url, name) {
return $.getScript(url)
}));
requests.then(function() {
$.holdReady(false);
}, function(error) {
console.log(error)
});
$(document).ready(function() {
// do stuff when `scripts` loaded
});

I am not sure if I understood the problem correctly, but from what I understood is that you are missing a declaration of dependency on your require.config, you are not telling require that it depends on anything, so, you need to make a change
to something like this:
require.config({
//alias
paths: {
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2',
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2'
},
//dependencies
shim: {
'jqueryValidateEngine': ['jqueryValidateEnglish']
}
});
I hope this is what you are looking for

how to load pagedown editor with requirejs

I am fairly new with requirejs. I have managed to use requirejs with AMD modules such as ace editor etc just fine. I saw on stackoverflow that it is theoretically possible to load normal js with requirejs.
After several attempts, research and some frustrations I have failed to load the pagedown editor with requirejs without errors.
Here is my code:
requirejs.config({
paths: {
jquery: "jquery-2.0.2.min",
bootstrap: "bootstrap.min",
ace: "ace/lib/ace",
prettify: "pagedown/prettify",
pdconv: "pagedown/Markdown.Converter",
pdsanity: "pagedown/Markdown.Sanitizer",
pdeditor: "pagedown/Markdown.Editor",
pdextra: "pagedown/Markdown.Extra",
},
shim: {
"bootstrap": {
deps: ["jquery"]
}
}
});
require(['jquery', 'bootstrap', 'ace/ace', 'prettify', 'pdconv', 'pdeditor', 'pdsanity', 'pdextra'],
function($, Bootstrap, ace, prettyPrint) {
var input = $('#wmd-input').text();
var editor = ace.edit("wmd-input");
var conv = Markdown.getSanitizingConverter();
Markdown.Extra.init(conv, {
extensions: "all",
highlighter: "prettify"
});
var md = new Markdown.Editor(conv);
md.hooks.chain("onPreviewRefresh", prettyPrint); // google code prettify
md.run(editor);
editor.focus();
});
Here is the error I keep getting:
Uncaught TypeError: undefined is not a function Markdown.Editor.js:185
I keep getting that error after each keystroke.
The files are indeed loaded via requirejs but does not work. Is there an easy way to make the pagedown editor work with requirejs or it is not possible.
Any help/advise/suggestions would be greatly appreciated.
Thanks

you can use like this:
requirejs.config({
paths: {
'markdown-converter': "../Scripts/markdown/Markdown.Converter",
'markdown-sanitizer': '../Scripts/markdown/Markdown.Sanitizer'
},
shim: {
"markdown-sanitizer": {
deps: ["markdown-converter"],
exports: "markdown-sanitizer"
}
}
});
// create markdown module
define("markdown",["markdown-converter","markdown-sanitizer"],function(mc, ms) {
return window.Markdown;
});
define("markdown",function(markdown) {
var converter = new Markdown.Converter();
return {
converter:converter
}
});

requireJS and ImagesLoaded : Object [object Object] has no method 'imagesLoaded'

I have kind of the same problem described in this question but there seem to be no right answer.
I'm trying to load the "loadImages" lib with require.js but I get this
Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'
Here is the script on my page :
require(['./js/common'], function(common)
{
require(['home/main-home']);
});
My common.js
requirejs.config({
baseUrl: './js',
paths: {
jquery : 'libs/jquery/jquery-2.0.3.min',
eventie : 'libs/eventie/eventie',
eventEmitter : 'libs/eventEmitter/eventEmitter.min',
imagesLoaded : 'libs/imagesLoaded/imagesloaded.pkgd.min',
masonry : 'libs/masonry/masonry.pkgd.min',
wall : './wall/wall',
underscore : '../libs/underscore/underscore-min',
backbone : '../libs/backbone/backbone-min',
},
shim: {
jquery : {
exports : '$'
},
imagesLoaded : {
deps : ['jquery', 'eventie', 'eventEmitter']
},
masonry : ['jquery'],
wall : ['masonry', 'imagesLoaded'],
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
underscore : {
exports : '_'
}
}
});
and this is my main-home.js where I want to use the imagesLoaded lib.
define([
'wall'
],
function(Wall){
$(function()
{
$('#photos').imagesLoaded( function(){}); // ERROR
});
return true;
});
In the imagesLoaded doc there's a small paragrah about require.js which i don't really understand. I tried to load thoses libs as well, but it is not changing anything.
// Install imagesLoaded and its dependencies
// Update your RequireJS paths config so it can find those modules
requirejs.config({
paths: {
"eventie": "bower_components/eventie",
"eventEmitter": "bower_components/eventEmitter"
}
});
They seem to talk about it in here https://github.com/desandro/imagesloaded/issues/68, but I don't really know what to do.
Here is the js files my page is loading :
We can see that imagesLoaded is loaded...
How come do I still have this error then ?

This jsfiddle works.
I've edited the ImagesLoaded JS (as a gist) to give the modules a valid module id.
Search for:
// --------------------------------------------------
// ADDED A MODULE ID
// --------------------------------------------------
in the code for the 3 changes (to define the imagesLoaded, eventEmitter/EventEmitter and eventie/eventie modules).
Given that the ImageLoaded JS file already includes the other 2 modules, there is no need for any more paths/shims.
HTML
<div id="photos"></div>
<script>
require = {
paths: {
"jquery": "http://code.jquery.com/jquery-2.0.3",
"imagesLoaded": "https://rawgithub.com/gitgrimbo/6451492/raw/f26e23d7a180ee23fd3dea3b0b152dbf523854a1/ImageLoaded-mod"
}
};
</script>
<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
JS
require(["jquery", "imagesLoaded"], function($, imagesLoaded) {
console.log($.fn.jquery);
console.log(imagesLoaded);
$('#photos').imagesLoaded(function() {
console.log("something");
});
});
Output
2.0.3
ImagesLoaded( elem, options, onAlways )
something

Require.js with jQueryMobile-Router

I load require.js with jQuery included like this in my html:
<script data-main="requires" src="lib/require-jquery.js"></script>
The content of my requires.js:
require.config( {
paths: {
"jquery.mobile": "lib/jquery.mobile",
"jquery.mobile.router": "lib/jquery.mobile.router"
},
shim: {
"jquery.mobile" : {
"exports": "$.mobile"
},
"jquery.mobile.router": {
"deps": [ "jquery.mobile" ],
"exports": "$.mobile.Router"
}
}
} );
require(["jquery.mobile.router" ], function() {
require(["router"]);
} );
And in my router.js i create a new instance of the jquery mobile router plugin:
router = new $.mobile.Router(...);
Which gives me this error:
Uncaught TypeError: undefined is not a function
When I output $ and $.mobile, they are both defined, just $.mobile.Router is undefined.
What have I done wrong here?

My Problem was that I added jquery.mobile as a dependency for jquery.mobile.router, thus jQuery mobile will be loaded first, where as the documentation for the router states this:
The jQuery Mobile router javascript file must be loaded before jQuery Mobile.
This is how I changed my requires.js to fix the problem:
require.config( {
paths: {
"jquery.mobile": "lib/jquery.mobile",
"jquery.mobile.router": "lib/jquery.mobile.router"
},
shim: {
"router": {
"deps" : ["jquery.mobile"]
},
"jquery.mobile" : {
"deps" : [ "jquery.mobile.router"],
"exports": "$.mobile"
},
"jquery.mobile.router": {
"exports": "$.mobile.Router"
}
}
});
require(["router"]);
Now I just require my router.js and load jquery.mobile and jquery.mobile.router as dependencies. Load order now is this:
jquery.mobile.router
jquery.mobile
router

Try this in your router.js file:-
define(["jquery", "jquery.mobile.router"], function($) {
// your js code in router.js
} );
By specifying jquery in your define call and passing in $ as an argument, the jquery object $ and associated functions defined in jquery.mobile.router are now made available in the scope of your code (contained in the file router.js in its entirety).