Uncaught Error: Bootstrap's JavaScript requires jQuery

[AndrewTerwiel]

I'm developing a custom search widget that references jQuery and Bootstrap libraries. The search textbox is a Twitter Bootstrap Typeahead.

I get 'Uncaught Error: Bootstrap's JavaScript requires jQuery' in the console when I load webapp/?config=config.json.  My init.js resources array looks like this:

resources = resources.concat([

   window.apiUrl + 'dojo/resources/dojo.css',

   window.apiUrl + 'dijit/themes/claro/claro.css',

   window.apiUrl + 'esri/css/esri.css',

   window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

   window.path + 'jimu.js/css/jimu.css',

   window.path + 'widgets/search/scripts/jquery-2.1.1.min.js',

   window.path + 'widgets/search/scripts/typeahead.jquery.min.js',

   window.path + 'widgets/search/scripts/bloodhound.min.js',

   window.path + 'widgets/search/scripts/typeahead.bundle.min.js',

   window.path + 'widgets/search/scripts/bootstrap.min.js',

   window.path + 'widgets/search/css/typeahead.css',

   window.path + 'widgets/search/css/bootstrap.min.css',

   window.path + 'widgets/search/css/bootstrap-theme.min.css'

]);

As you can see, jquery-2.1.1.min.js precedes bootstrap.min.js in the array, and yet the error message would indicate that bootstrap is being loaded first. Hitting F5 a few times gets it to load successfully, but this appears random, and obviously is not a solution.

[AndrewTerwiel]

I found that by added the script tag to into the head section of \client\stemapp\index.html that all of my JQuery errors disappeared.

<script type="text/javascript" src="/webapp/widgets/search/scripts/jquery-2.1.1.min.js"></script>

[TomWayson]

You should also be able to use the jQuery or order loader plugins in the define() block of your widget. I have not tried those personally, but in theory that should be a more maintainable solution b/c you would not have to modify index.html or init.js for each app you want to use this widget in. I don't see any docs on how to use these, but they can be found in:

\jimu.js\loaderplugins

The idea is that you pass the URLs to jQuery and plugins as a comma separated string as follows:

define(['jimu/loaderplugins/jquery-loader!./jquery/jquery-1.7.1.js, jquery/jquery.showLoading.js']. function($) {...});

Alternatively, you could also use Dojo Bootstrap - I have an example of how to do that here:

tomwayson/web-appbuilder-bootstrap · GitHub

[AndrewTerwiel]

Thanks, Tom. I tried your suggestion. Unfortunately when using this method the typeahead.jquery.min.js library is not loaded. I also tried loading both the JQuery and Typahead libraries using the Jimu loader. This didn't work either, so I've gone back to my nasty hack of index.html.

[JunshanLiu · Accepted solution]

The loadResources method doesn't guarantee loading order. If you want to use this method to load resource and keep loading order, you have to use call back.

If the resources are not shared resources, the suggested way is to use jquery loader in your widget.

If the resources are shared, the suggested way is to put them in libs folder and load them in libs/main.

[AndrewTerwiel]

When you say "suggested way", where did you find this suggestion? I've had trouble finding this documentation. I can only find this: Use other JavaScript libraries—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers...

[TomWayson]

Well Junshan Liu​ is one of the core developers of the WAB, and since he "suggested" that approach in the above forum post, it's now the "suggested way."

[JunshanLiu]

I am sorry for that I don't make this thing clear. I try to make it more clear here:

1. libs folder is for putting your shared 3rd party libs. "Shared" here means shared by more than one widgets, or by your themes or widgets.

2. The resources in the "resources" array will be loaded before/at the same time/after(because loadResource method will not ensure the loading order) with dojo/JSAPI

3. Resources depended by libs/main will be loaded after resources in the resources array(including JSAPI) are loaded.

So, you can make decision about where you put your resource. Please replay if this post is still not clear.

[AndrewTerwiel]

So if put my jQuery library reference in the resources array in \client\stemapp\init.js and put my libraries that depend on jQuery, like Bootstrap, in \client\stemapp\libs\store and add a reference to those libraries in the define of \client\stemapp\libs\main.js, will this force jQuery to load before Bootstrap?

[BrianO_keefe]

Question for Junshan Liu​, if I want to include the D3js.org library would I use the "jimu/loaderplugins/jquery-loader" in my Widget or would I go another route?