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.

[JeremieCornet1]

+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.j... ).

[AndrewTerwiel]

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;

            });