Select2 v4 needs AMD fixing in Domino R9 XPages

As we have seen in the past AMD (Asynchronous Module Definition) in Dojo causes issues with jQuery plugins and other JavaScript libraries, in that it prevents them from loading correctly.

The select2 version4 – new release contains AMD checking code

https://github.com/select2/select2/blob/master/dist/js/select2.js

As you can see from the start

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

So we have two choices – edit the select2.js code which you download and add it to your database – change the code to look like this

(function (factory) {
  if (typeof define === 'function' && false) { // removed define.amd and returned false
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

Or we have to ensure the database properties are set to do resource aggregation and use the following code to insert jQuery and select2 into the header

<xp:this.resources>

  <xp:headTag tagName="script">
   <xp:this.attributes>
    <xp:parameter name="type" value="text/javascript" />
    <xp:parameter name="src" value="js/jquery-1.9.1.min.js" />
   </xp:this.attributes>
  </xp:headTag>

  <xp:headTag tagName="script">
   <xp:this.attributes>
    <xp:parameter name="type" value="text/javascript" />
    <xp:parameter name="src" value="select2.js" />
   </xp:this.attributes>
  </xp:headTag>
 </xp:this.resources>

Check out Sven’s other blog post on the subject – http://hasselba.ch/blog/?p=1181

5 thoughts on “Select2 v4 needs AMD fixing in Domino R9 XPages

  1. The other option is to use AMD to load jquery and select2.

    require({aliases: [[‘jquery’, ‘js/jquery.js’], [‘select2’, ‘js/select2.js’]]},
    [‘jquery’, ‘select2’],
    function($, select2) {
    $(function() {
    $(‘[id$=comboBox1]’).select2();
    });
    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s