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:

  1. make sure calling/ referencing bootstrap-typeahead.js
  2. make sure have no more 1 reference bootstrap-typeahead.js
  3. 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

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -