In Domino 9 dojo comes with the AMD loader which seems to be interfering with loading of external javascript libraries eg Jquery Mobile, Fullcalendar.
The quick solution is to load these external libraries before the dojo libraries. But this requires the Xpage property: "Use runtime optimized Javascript and CSS resources" to be set.
The problem with this is that images referenced in compressed css files will break. Eg font-awesome, jqueryui.
This is a major flaw in the product that these references have to be recoded in the css files for it to work.
So the question is can eg fulcalendar and it's dependencies be loaded via AMD in Xpages so we don't have to recode all css files referencing images?
What exatly is your problem with loading jquery. I am loading jquery and other js libraries like select2, dgrowl, jgrid without any problems
When using the "Use runtime optimized Javascript and CSS resources" setting, there are some additional options you can set directly in xsp.properties to stop aggregation of CSS files like font-awesome. In this instance use 'xsp.resources.aggregate.css=false' and you will be good to go.
See http://lotusnotus.com/lotusnotus_en.nsf/dx/xpages-performance-dojo-widgets-and-resource-aggregation.htm for full details of all of the options.
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
I publish a library called DataTables and I'm looking to improve how it works with package managers for the next set of releases. RequireJS is the one i'm specifically looking at just now. Building the Javascript AMD support for RequireJS in DataTables is relatively simple, however, DataTables doesn't really make a lot of sense without some styling.
I publish a number of styling integrations (Bootstrap, Foundation, jQuery UI and DataTables own default with others planned) so I'd like to have something like require(['jquery', 'datatables.net-bs'], ... ); which will include DataTables and the Bootstrap styling for DataTables.
I could simply list a bunch of <link> tags for folks to include, but if I do that, I might as well just publish the <script> tags and forego RequireJS altogether.
I know that CSS is not supported by the RequireJS core, but I was hoping to use the require-css plug-in. That works well, but I can't find a way to have a module name include both the JS and CSS.
I found that the config.paths option for a module could specify multiple files in an array, so I tried:
'datatables.net-bs': [
'require-css!//nightly.datatables.net/css/dataTables.bootstrap.min',
'//nightly.datatables.net/js/dataTables.bootstrap.min',
]
But the plug-ins operate on the module name, not the path. I had a look at the plug-ins API but can't see an option to add a plug-in at that point (unless anyone knows better)?
If that isn't the best approach, can anyone suggest what is a better one?
This is what I have tried: http://jsfiddle.net/coaqsjkv/ - note that the CSS "plug-in" is not resolved at the path level giving a 404.
I could have the require list all the JS files and CSS files needed - but that seems very verbose (three files for DataTables with Bootstrap styling for example).
Any insights very welcome.
I have a web app built with Dojo 1.7.2, using RequireJS to load individual modules with AMD. I'd like to add a slightly customized copy of the ACE code editor version 0.2.0, which is about 9 months old and uses an earlier, incompatible version of RequireJS to load itself.
Really I'd just like to include the different JavaScript files (Dojo and ACE) without having a namespace collision (on global functions declare and require which is something that RequireJS is designed to help prevent anyway). I'd like to do this without further customization of either project. Is that even possible to do?
Ace's authors recommend using the newest version from the master branch which should be compatible with recent RequireJS.
BTW, could you post somewhere how you managed to run Dojo 1.7.2 with RequireJS?
Is there a way to link multiple javascript files without making them one file?
What I would like is to have one file (javascript or otherwise) which houses links to my other javascript files.
For example, the webpage has one file called allmyscirpts.js, and inside this file is a list of links to my actual individual, separataed javascript files.
Is this possible?
Tod
JS can't simply import more JS, but you could easily write a simple server-side script that concatenates your files together. If you can't/won't work on the server, scriptloader libraries are very plentiful out there these days. Check out require.js, lab.js, yepnope.js, etc. and see if one of them suits you well.
The only way I can think of is to load Javascript files through ajax. The YUI Loader you to not only load all your js files (and those from YUI) within javascript, but it also allows you to configure dependencies between your js files. So For instance, if widget1.js requires global.js, you can configure that dependency, then you can tell the loader to load "widget1" and the loader will also load global.js when it loads widget.js.
Unlike css, I do not believe there is built in syntax in javascript that automatically includes another javascript file. But there are javascript utilities out there that allow this.
For a simpler solution than the YUI Loader, check out the YUI get utility. For my projects I have setup the YUI loader, and as a result my HTML pages only have about 2 or 3 javascript files included, and the rest of what I need is loaded on demand by the Javacript controller for that page.
I want to incorporate a minified javascript library (for example http://sizzlejs.com/) into my own non minified javascript library. The reason is that my library plugs into other websites and I don't want to ask them to include the extra library (sizzle) as well.
Is there a way to include a minified library in a non minified library and have them both in one js file?
The simplest approach would be to just copy and paste the code from the minified library directly into the top of your file.
You could just copy the sizzle code into your own code. That is, at the top or bottom of your js file. This is how jQuery include sizzle in their code.
Or you could dynamically add a script tag element to the "head" of the document in your own library which has src set to the sizzle minified file (look at how jQuery includes scripts in its AJAX routines for an example).
If you include dynamically, you might find that it's actually faster, as you can probably link to sizzle from the google servers, and the user may well have it already cached in their browser (jQuery actually recommend including their own library in this way)