im new to requirejs and been loving it so far. I am in the process of implementing it to my existing project. I have a few jquery, Jquery UI and bootstrap plugins that all need to initialise at the start of the app.
I was hoping to put them all ligned up in a file called GDI_common.js and have it set in my main.js file in a require. When I load my page it seems to ignore my GDI_commons script. If I try to manually load the plugins via console they work fine.
I made sure that my dependencies are all correct and have what they need. Not quite sure what im overlooking at this point. Would anyone have any ideas or suggestions?
This is what my main.js file looks like:
require.config({
paths: {
"jqueryui": "../assets/jqueryUI/jquery-ui.min",
"bootstrap": "bootstrap.min",
"bootstrap_select": "../assets/silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.min",
"jqueryui_timepicker": "jquery-ui-timepicker-addon",
"jqueryui_timepicker_ext": "jquery-ui-sliderAccess",
"moment": "moment",
"cookie": "js.cookie",
"knockout-amd-helpers": "knockout-amd-helpers.min",
"text": "text"
},
"shim": {
bootstrap: {
deps : [ 'jquery'],
exports: 'Bootstrap'
},
bootstrap_select: {
deps : [ 'jquery', 'bootstrap'],
exports: 'Bootstrap_Select'
},
jqueryui_timepicker: {
deps : [ 'jquery','jqueryui'],
exports: 'JqueryUI_Timepicker'
},
jqueryui_timepicker_ext: {
deps : [ 'jquery','jqueryui'],
exports: 'Jqueryui_Timepicker_Ext'
}
}
});
require(["jquery","knockout", "XApplication", "Xcommon", "XButtons", "knockout-amd-helpers", "text", "moment"], function ($, ko, XApplication, GDI_common) {
ko.amdTemplateEngine.defaultPath = "../templates";
var viewmodel = new GDI_Application();
ko.applyBindings(viewmodel);
viewmodel.fetchdata();
});
This is what my my GDI_common file looks like:
define(["jquery", "jqueryui", "jqueryui_timepicker", "jqueryui_timepicker_ext", "moment", "bootstrap_select"], function($) {
//This loads the jqueryui_timepicker (jquery-ui-timepicker-addon.js) it needs jqueryui.
$('input[title^="Date de"]').datetimepicker({
addSliderAccess: true,
timeFormat: 'HH:mm',
dateFormat: "yy-mm-dd",
sliderAccessArgs: { touchonly: false }
});
//This loads the bootstrap-select plugin (bootstrap-select.min.js) it needs jquery and bootstrap.
$('.selectpicker').selectpicker();
//This is a jquery custom code that is used to calculate 2 fields upon clicking the .donne_moi_le_temps button.
$(".donne_moi_le_temps").click(function(){
updateDuration($('#DateDeDébut').val(), $('#DateDeFin').val());
function updateDuration(startTime, endTime) {
var ms = moment(endTime, 'YYYY/MM/DD HH:mm').diff(moment(startTime, 'YYYY/MM/DD HH:mm')),
dt = moment.duration(ms),
h = Math.floor(dt.asHours()),
m = moment.utc(ms).format('mm');
$('input[title^="Dur"]').val(h + ' heures, ' + m + ' minutes');
}
});
//This is loads the bootstrap tooltip function, this requires jquery and bootstrap.
$('[data-toggle="tooltip"]').tooltip();
//This is custom code and depends on the tooltip to be loaded first.
$(document).on('mouseenter', ".over_flow_control", function() {
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
$this.tooltip({
title: $this.text(),
placement: "bottom",
container: 'body'
});
$this.tooltip('show');
}
});
});
Related
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 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'm loading data into a jqGrid through requireJS, the data loads, formats and displays but after which nothing works, sorting, row selecting, paging etc. The grid works perfectly fine if I init the jqGrid without requireJS.
RequireJS config snippet :
"jqGrid": "jqGrid/jquery.jqGrid.min",
"grid-locale": "jqGrid/i18n/grid.locale-en", ...
shim: {
"jqGrid": ["grid-locale", "jquery-ui"]
}
JavaScript snippet:
define(["jquery", "httpUtils", "jqGrid"],
function ($, httpUtils, jqGrid) {
window.jqGrid = jqGrid;
var myViewModel = function () {
var data = httpUtils.httpSyncGet('xxx');
var grid = $('#index').jqGrid({
colNames: ['ClientIdentifier'],
colModel: [
{ name: 'ClientIdentifier', width: "150pt" }
],
datastr: data,
datatype: 'jsonstring',
rowNum: 25,
rownumbers: true,
height: 500,
viewrecords: true,
width: 1100,
shrinkToFit: false
});
};
return myViewModel;
});
Sorry if the code isn't very comprehensive I had to take out snippets from a large project. I'm just curious as to what causes the jqGrid to finish loading, but somehow 'unload' all of it's functions. There is no javascript error in the console as well.
I think you're missing some modules and dependencies. Here's what worked for me (and is also trimmed out from a larger project):
require.config({
baseUrl: "Scripts/TypeScript",
paths: {
jquerygrid: "../jquery.jqGrid.src",
jqueryui: "../jquery-ui-1.11.4",
jqgridlocale: "../i18n/grid.locale-en",
jqgrid: "../jquery.jqGrid.min"
},
shim: {
jqueryui: {
deps: ["jquery"]
},
uigrid: {
deps: ["jqueryui"]
},
jqgrid: {
deps: ['jqueryui', 'jqgridlocale']
},
jqgridlocale: {
deps: ['jqueryui']
}
}
});
I adapted the code above from this answer: requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid , which addresses a more complicated scenario but my also be useful for you.
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
}
});
I have been wrestling a bit to get GreenSock JS (TweenMax) to work with require.js. I finally got it working in modern browsers, but IE8 is throwing weird errors.
My main require config file:
require.config({
baseUrl: '/ui/js',
paths: {
jquery: 'modules/libs/jquery-1.10.2',
tweenmax: 'modules/vendor/greensock-js/TweenMax'
},
shim: {
jquery: {
deps: ['constants'],
exports: 'jQuery'
},
tweenmax: {
exports: 'TweenMax'
}
}
});
My 'module' file:
define([
'jquery',
'tweenmax'
], function($, TweenMax) {
// Subscribe to the 'toggleFlyout' event
// The event is used to open the flyout menu
$(document).on('toggleFlyout', function() {
var $html = $('html');
var $page = $('.page');
var openClass = 'js-flyout-open';
if ( !$html.hasClass(openClass) ) {
TweenMax.to($page, 0.2, {left:246, onStart: function() {
$html.addClass(openClass);
}});
} else {
TweenMax.to($page, 0.2, {left:0, onComplete: function() {
$html.removeClass(openClass);
}});
}
});
// Publish the 'toggleFlyout' event
// The event is published when the user click the menu button or the page overlay
$(document).on('click', '.main-header__nav a, .toggle-flyout', function(event) {
event.preventDefault(event);
$(this).trigger('toggleFlyout');
});
});
IE8 is throwing the following errors:
Expected identifier TweenMax.js, line 2295 character 4
'TweenMax' is null or not an object flyout.js, line 38 character 4
Note, that the code is working fine in modern browsers.
TweenMax and Jquery are AMD modules since a very early version you don't not need shim config for them..
You should also compile your solution.
Requirejs is better to run as dependency manager and packager than a module loader.
Use
https://github.com/gruntjs/grunt-contrib-requirejs
for reference.