topic Re: Uncaught Error: Bootstrap's JavaScript requires jQuery in Web AppBuilder Custom Widgets Questions

Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Thu, 14 May 2015 00:15:58 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Thu, 14 May 2015 04:27:54 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

TomWayson — Thu, 14 May 2015 16:58:22 GMT

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

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Sun, 17 May 2015 22:00:26 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

JunshanLiu — Mon, 18 May 2015 02:30:26 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Wed, 20 May 2015 21:54:46 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

JeremieCornet1 — Wed, 20 May 2015 22:24:44 GMT

+1 with Tom : to use bootstrap with dojo, use dojo-bootstrap !

Dojo-bootstrap supports typeahead :

Typeahead - Dojo Bootstrap

After referencing dojo-bootstrap in dojoConfig (-> in the wab init.js : you can see it in Tom's example https://github.com/tomwayson/web-appbuilder-bootstrap/blob/master/src/init.js#L161 ), you just have to call what you need in your widgets (in Tom's example : https://github.com/tomwayson/web-appbuilder-bootstrap/blob/master/src/widgets/BootstrapTest/Widget.js#L11 ).

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

TomWayson — Wed, 20 May 2015 23:43:27 GMT

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."

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

JunshanLiu — Thu, 21 May 2015 02:03:47 GMT

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.

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Fri, 22 May 2015 02:24:38 GMT

Thanks, Jeremie.

I've been trying to use the Dojo Bootstrap Typeahead since you made me aware of it. I've got it half working. I can get a list of items to show, but I can't figure out how to get the selected value when a list item is clicked.

I've pasted in a code fragment below.

I see that the 'change' event fires twice. The first time event.currentTarget.value is the string that was typed into the input. The second time it is the value that was selected from the drop down list.

Another issue I have with the typeahead is that the process function only takes an array of strings. If pass it an array of objects like below, how do I get the address to display and, assuming that's possible, how do I get the parcelId when the item is selected:

[{

"address":"10 Woodleigh Street",

"locality":"Frankleigh Park",

"parcelId":4648447

}]

Here is the code that half works and displays an address when an array of strings is passed to process(), but fires the 'change' event twice when a list item is clicked.

var q = dojo.query;

q('#searchText').typeahead({

minLength: 5,

source: function (query, process) {

return xhr("http://localhost/SearchWebAPI/api/searchitem/1/?" + $.param(widget._searchLayers) + '&q=' + query,

{ handleAs: 'json', headers: { 'X-Requested-With': '' } })

.then(function (data) {

var dataArray = [];

for (var i = 0; i < data.length; i++) {

if (data.address) {

dataArray.push(data.address);

}

process(dataArray);

});

}

}).on('change', function (event) { // fires twice

var val = event.currentTarget.value;

});

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

AndrewTerwiel — Fri, 22 May 2015 02:50:14 GMT

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?

Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

BrianO_keefe — Wed, 10 Feb 2016 19:25:45 GMT

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?