jquery - Bootstrap typeahead inside Durandal SPA application -
i have spa application using default durandal package set-up. using knockout, jquery, jquery ui, , trying use twitter bootstrap typeahead. building on default durandal pages using html on shell.html(navbar)
<form class="navbar-search pull-right"> <input type="text" class="search-query" id="employeesearch" placeholder="search employees" data-bind="typeahead: employees"> </form>
in order use typeahead custom knockout binding using answers provided here creating autocomplete field typeahead in durandal framework
i creating own datasource in connected js file here
this.employees = function () { var self = this; $.ajax(app.url('/employees'), { contenttype: 'application/json', datatype: 'jsonp', success: function (result) { self.employees = result; } }); }; var shell = { router: router, employees: employees, activate: function () { return boot(); } }; return shell;
i using nancy on backend create webservice reason using jsonp datatype. able results fine, when loading page, keep getting error "object [object object] has no method 'typeahead'" in chrome debugger page never finishes loading.
also, when remove knockout-bootstrap library, page able load without errors, search box non functional. have made sure including libraries in right order, jquery->jqueryui->knockout->bootstrap->custom javascript. of examples have seen work, cannot wrap head around problem!
most of examples have seen use content in js
$('#employeesearch').typeahead({ source: function (query, process) { return $.get(window.location.pathname +'?ajax=accounts&ajax_mode=search', { 'value': query }, function (data) { return process(data.result); }); }, minlength: 1, items: 12 }); //a rough example
i have tried using method have not been able within spa framework. let me know thoughts or more code needed. thanks
you may need few checks:
- make sure calling/ referencing bootstrap-typeahead.js
- make sure have no more 1 reference bootstrap-typeahead.js
- because modules loaded amd via requirejs, make sure have following in module making use of typeahead feature e.g. require('scripts/bootstrap-typeahead.js')
Comments
Post a Comment