We Keep Coding

How to inclue Jquery TimeEntry plugin with RequireJS

I am new working with requirejs, I have an old Asp.net Webform application that I am trying to apply some javascript module loading using requirejs. In this app I am using a jquery plugin named Time Entry, but is not working if I use requirejs, only works if I added the reference the old way. Here is my requirejs configuration and declaration.
In the aspx file:
<script src="../../scripts/require.js"></script>
<script>
require(["../../app/shared/require.config"],
function (config) {
require(["appIncidentTracking/incident-type-init"]);
});
</script>
My require.config file is like this:
require.config({
baseUrl: '../../scripts',
paths: {
app: '../../app/utilization-management',
appIncidentTracking: '../../app/incident-tracking',
jquery: 'jquery-3.1.1.min',
jqueryui: 'jquery-ui-1.12.1.min',
jqueryplugin: '../../js/jquery.plugin.min',
timeentry:'../../js/jquery.timeentry.min',
handlebars: 'handlebars.amd.min',
text: 'text',
moment: 'moment.min',
datatable: 'DataTables/jquery.dataTables.min',
blockUI: 'jquery.blockUI.min',
shared: '../../app/shared',
bootstrap: 'bootstrap.min',
'bootstrap-datepicker': 'bootstrap-datepicker.min',
'bootstrap-multiselect': '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
bootstrap: {
deps: ['jquery']
},
'bootstrap-multiselect': {
deps: ['bootstrap']
},
timeentry: {
deps:['jquery', 'jqueryplugin']
}
}
});
and in my incident-type-init.js I only call the plugin:
/**
* Incident Type Init page
* #module incident-type-init
*/
define(function (require) {
var $ = require('jquery'),
jqueryplugin = require('jqueryplugin'),
timeentry = require('timeentry'),
bootstrap = require('bootstrap');
/**
* Jquery ready function
*/
$(function () {
$('.js-timeentry').timeEntry();
});
});
but when the application runs I got this error:
$.JQPlugin.createPlugin is not a function, it is like does not find the jquery.plugin.js
I checked the network tab in chrome and both files are loaded, jquery.plugin.js and jquery.timeentry.js
UPDATE: In our application, we are using Asp.net MasterPages, and there we are loading an old jquery version, 1.5.1, and I use that MasterPage in my page, but when I check the network tab in chrome, is loading the MasterPage scripts first,then all the requirejs stuff.
and the funniest part is that sometimes work, sometimes not.
Any clue?

The module jqueryplugin needs to have jQuery already loaded for it. It is not an AMD module because it does not call define. So you need an additional entry in shim for it:
jqueryplugin: ["jquery"]
The above is short for:
jqueryplugin: {
deps: ["jquery"]
}

I don't think your code is syntactically correct.
Try this:
1. Your script should refer to the require.config in data-main.
<script data-main="PATH_TO_CONFIG_FILE" src="../../scripts/require.js"></script>
2. Quotes are missing in paths of the config file. Instead it should be like this
require.config({
baseUrl: '../../scripts',
paths: {
"app": '../../app/utilization-management',
"appIncidentTracking": '../../app/incident-tracking',
"jquery": 'jquery-3.1.1.min',
"jqueryui": 'jquery-ui-1.12.1.min',
"jqueryplugin": '../../js/jquery.plugin.min',
"timeentry":'../../js/jquery.timeentry.min',
"handlebars": 'handlebars.amd.min',
"text": 'text',
"moment": 'moment.min',
"datatable": 'DataTables/jquery.dataTables.min',
"blockUI": 'jquery.blockUI.min',
"shared": '../../app/shared',
"bootstrap": 'bootstrap.min',
"bootstrap-datepicker": 'bootstrap-datepicker.min',
"bootstrap-multiselect": '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
"bootstrap-multiselect": {
deps: ["bootstrap"]
},
"timeentry": {
deps:["jquery", "jqueryplugin"],
exports:"timeentry"
}
}
});
3. Since your module has dependencies, list them like this:
define(["jqueryplugin","timeentry","bootstrap"],function(jqueryplugin,timeentry,bootstrap) {
$(function () {
$('.js-timeentry').timeentry();
});
});

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 jQuery Migrate for jQuery via RequireJS?

Can I load jQuery migrate via RequireJS? I don't understand how the timing can be handled correctly. See this example:
require([
'jquery',
'jqmigrate'
], function ($) {
if ($.browser.msie) {...}
});
Isn't is possible that jqmigrate will load before jquery? Also, I do not want to keep loading jqmigrate explicitly in every module. Any way to do this in the require.config so it loads jqmigrate automatically when jQuery is required?

There are a couple of things you will need:
make sure jqmigrate depends on jquery.
you could write a wrapper module that include both, and return jquery, so your require.config could look like:
jquery-wrapper.js:
define(['jquery-src', 'jqmigrate'], function ($) {
return $;
})
require.config
{
paths: {
'jquery-src' : '/path/to/jquery',
'jqmigrate': '/path/to/jqmigrate',
'jquery': '/path/to/jquery-wrapper'
}
}

using shims worked for me. I did get stuck because i had pluralized shims its; shim
requirejs.config({
paths: {
'jquery': '//code.jquery.com/jquery-2.1.4',
'jquery-migrate': '//code.jquery.com/jquery-migrate-1.2.1'
},
shim: {
'jquery-migrate': { deps: ['jquery'], exports: 'jQuery' },
'foo': ['jquery']
}
});
require(['jquery-migrate', './foo'], ($, foo) => {
console.log('bootstrapped', $, foo);
});

jQuery Migrate 3.0.1 currently has a defect that renders it unusable for RequireJS or any AMD loader. A change is required to the UMD fragment before implementing the accepted answer:
define( [ "jquery" ], function ($) {
return factory($, window);
});
Details and solution are here.

jquery-migrate-wrapper.js
define(['jquery', 'jquery-migrate'], function ($) {
// additional initialization logic can be added here
$.UNSAFE_restoreLegacyHtmlPrefilter();
return $;
})
require-config.js
require.config({
...otherConfigOptions,
shim: {
...otherShimSettings,
'jquery-migrate':{deps: ['jquery']},
},
map: {
// provides 'jquery-migrate-wrapper' for all (*) modules that require'jquery'
'*': { 'jquery': 'jquery-migrate-wrapper' },
// but provides the original 'jquery' for 'jquery-migrate-wrapper' and
// 'jquery-migrate'
'jquery-migrate-wrapper': { 'jquery': 'jquery' },
'jquery-migrate': {'jquery': 'jquery'}
}
})

RequireJS: CDN fallback not working with Kendo

Struggling to set up RequireJS with KendoUI over CDN and can't get fallback to work.
... from amazing burkeholland A Kendo UI ASP.NET MVC SPA Template
This what I begin with :
define([
'../Scripts/kendo/2014.1.416/kendo.router.min',
'../Scripts/kendo/2014.1.416/kendo.view.min',
'../Scripts/kendo/2014.1.416/kendo.fx.min'
], function () {
return kendo;
})
and it works fine.
If kendo.core.min is not defined, first statement in kendo.router says define(["./kendo.core.min"] and it is loaded from proper location.
However, when I try to use CDN with fallback location like this :
requirejs.config({
paths: {
'router': ['//cdn.kendostatic.com/2014.1.416/js/kendo.router.min', '../Scripts/kendo/2014.1.416/kendo.router.min'],
'view': ['//cdn.kendostatic.com/2014.1.416/js/kendo.view.min', '../Scripts/kendo/2014.1.416/kendo.view.min'],
'fx': ['//cdn.kendostatic.com/2014.1.416/js/kendo.fx.min', '../Scripts/kendo/2014.1.416/kendo.fx.min']
}
});
define([
'router',
'view',
'fx'
], function () {
return kendo;
});
requireJS tries to load kendo.core.min from baseUrl location, not fallback location.
Am I missing something?
However, if I try something like this :
requirejs.config({
paths: {
k: ['//cdn.kendostatic.com/2014.1.416/js', '../Scripts/kendo/2014.1.416']
}
});
define([
'k/kendo.router.min',
'k/kendo.view.min',
'k/kendo.fx.min'
], function () {
return kendo;
})
Fallback doesn't work at all... what am I missing?

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).