jquery - Bootstrap-3-Typeahead not working in chrome browser -


i using bootstrap version3.3.5 bootstrap-3-typeahead. typeahead working fine in firefox not working in chrome. uncaught typeerror: "typeerror: $(...)typeahead not function". using django framework. typeahead.js included in bootstrap.js file using grunt.

i found while browsing can happen because of following reasons:-

  1. jquery loaded after bootstrap.js.
  2. jquery being loaded more once.

but both of these not seem hold true code .code following:-

    <meta http-equiv="content-type" content="text/html; charset=utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">     <meta name="viewport" content="width=device-width, initial-scale=1">     {% load staticfiles %}     <!-- bootstrap -->     <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}">     <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap-theme.min.css" %}">      <!-- html5 shim , respond.js ie8 support of html5 elements , media queries -->     <!-- warning: respond.js doesn't work if view page via file:// -->     <!--[if lt ie 9]>       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>     <![endif]--> 

/* rest of html .. no js or jquery getting loaded in between. */

    <script src="{% static "jquery/jquery.min.js" %}"></script>     <!-- include compiled plugins (below), or include individual files needed -->     <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>     <script type="text/javascript">         $(document).ready(function() {              $('#id_area').typeahead({                 source: function (query, process) {                     return $.get('/user/match/area/?q=' + query, function (data) {                         return process(data.search_results);                     });                 }             });             function customwidth()             {                 var formwidth = $('#adv-search').width();                        $('.dropdown-menu').width(formwidth- 40);                };              customwidth();             $(window).resize(function(e) {                 customwidth();             });         });     </script> 

the error getting on line -- $('#id_area').typeahead({ . not able figure out issue. please help.

i not sure had gone wrong. after clearing browser cache (ctrl+f5) , started worked fine.

if knows have been gone wrong, please let me know. might me in future.


Comments