Friday, 8 April 2016

Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)

In my blog post from yesterday, Bootstrap Plugins in XPages Part V - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes, I showed two solution to the AMD problem.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)

Mark Leussink pointed me in his comment on a third possibility. It involves moving the AMD disable/enable code to JavaScript files. This solution  works also when the option 'Use runtime optimized JavaScript and CSS resources' is enabled in the XSP Properties. More information 'AMD Loader disable, enable in theme' on StackOverflow. In this case it is also not necessary to include the scripts in the Resources of the XPage ('NotesIn9 149: Database Resources and Design Definition').
Just create two JavaScript files, 'disable_amd.js' and 'enable_amd.js', add the JavaScripts in the Script Libraries and finally add the JavaScript files to an XPage or Custom Control.
Load the first one before you load the jQuery AMD enabled widget (JavaScript file),place it above this file and load the second one afterwards. It works great! Thanks Mark.

Basic Example XPage on GitHub Gist:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument></xp:this.data>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="select2v4/js/select2.js" clientSide="true"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:panel>



Another possibility is to use <xp:parameter name="xsp.resources.aggregate" value="false"> on the specific XPages (or Custom Control) were the Hack is needed when 'Use runtime optimized JavaScript and CSS resources' is enabled for the entire XPages Application. Just add it in the head of the XPage (or Custom Control) and it also works just fine.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="false" />
</xp:this.properties>
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<!-- temporary redefine define.amd object  (Dojo AMD loader) -->
<xp:script clientSide="true" type="text/javascript">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
</xp:script>
<!-- load jquery AMD enabled widgets -->
<xp:script src="/select2.js" clientSide="true"></xp:script>
<!-- restore define.amd object (Dojo AMD loader) -->
<xp:script clientSide="true">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
</xp:script>
</xp:this.resources>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:panel>

Basic Example on GitHub Gist.

Like in many cases there are several solutions provided to solve the AMD problem with the newer jQuery and JavaScript plugins. Choose one of the provided solutions and happy coding!

No comments:

Post a Comment