XPages and Loading JavaScript Files

Question

I am using xPages with Bootstrap 3 and was asking earlier about how to get formValidation.io working. I was able to do so with help from Brahim Arkni and it hinged on the fact that a Javascript file wasn't loaded.

I'm now trying to use intlTelInput and receiving the same kind of message "intlTelInput is not a function" so I'm working on the theory that this is the same problem. All the files are loaded but perhaps not in the correct order or at the correct time.

So my question is, when would you call a .js file from within your theme file (it loads but displays all the .js files in one long line which is less easy to search to find if the correct file loaded) using this syntax:

    <resource>
            <content-type>application/x-javascript</content-type>
            <href>formvalidation/dist/js/formValidation.js</href>
    </resource>

Or when would you load the files inside of the custom control or xPage (which then do show up on separate lines when looking to see which ones are loaded), using:

    <script src="build/js/intlTelInput.js"></script>

I should add that all of these files are in the WebContent folder in my application.

Is there a 'right' way to load Javascript files and how do you know what order to load them in?

08/15/2017: Thanks so much for the help Per. The commented out part is what was in the file and the code above it is what I changed it to. How have I gone wrong, because I still get the same error message, along with "unexpected token" for function a Thanks so much for the help Per. The commented out part is what was in the file and the code above it is what I changed it to. How have I gone wrong, because I still get the same error message, along with "unexpected token" for function a

! function(a){ 
 if(typeof module && module.exports){
    "object" == module.exports=a(require("jquery"), window, document;
    return "object";
} else {
    "function" == define(["jquery"], function(b) {
       a(b, window, document)
        });
    return "function";
    }
} 
//! function(a) {
//    "function" == typeof define&&define.amd? define(["jquery"],    function(b) {
//        a(b, window, document)
//    }) : "object" == typeof module && module.exports ? module.exports = a(require("jquery"), window, document) : a(jQuery, window, document)      
//}

Answer 1

The jQuery plugin intl-tel-input uses AMD which conflicts with Dojo in XPages. See this answer for a solution on how to disable AMD in order to make the plugin work.

In your case you should change the first part of intlTelInput.min.js to the following (where I have replaced define.amd with false):

!function(a){"function"==typeof define&&false?define(["jquery"],function(b){a(b,window,document)}): ...