dynamicFilter problem when revisiting same page #200
Description
Hello,
Yet another weird problem, btw I love your app :-)
I'm using dynamicFilter to filter the list based upon a select field which gets initiated when the page opens. Everything runs fine the first time but when I revisit the page later I get this error :
"TypeError: Cannot read property 'append' of null
at Object.Typeahead.buildHtmlLayout"
I change routes using ui.router ($state.go() )
The code of my Typeahead is :
$.typeahead({
input: "#l01",
order: "asc",
maxItem: 50,
minLength: 3,
hint: false,
backdrop: false,
dynamic: true,
cancelButton: false,
dynamicFilter: [{
selector: "#l03",
key: "&t136land"
}],
display: ["t136postcode"],
template: function () {
return "{{t136postcode}}" + " " + "{{t136gemeente}}" + " " + "{{t136land}}";
},
emptyTemplate: "geen resultaten gevonden voor {{query}}",
source: {
straten: {
ajax: {
type: "GET",
path: "waarden",
url: "/vf/rest/gemeenten/search?",
data: {
q: "{{query}}"
}
}
}
},
callback: {
onNavigateAfter: function (node, lis, event) {
if (~[38,40].indexOf(event.keyCode)) {
var resultList = node.closest("form").find("ul.typeahead__list"),
activeLi = lis.filter("li.active"),
offsetTop = activeLi[0] && activeLi[0].offsetTop - (resultList.height() / 2) || 0;
resultList.scrollTop(offsetTop);
}
},
onClickAfter: function (node, a, item) {
node.val(item.t136postcode);
$("#l02").val(item.t136gemeente);
vm.straat.t128postcode = item.t136postcode;
vm.straat.t128gemeente = item.t136gemeente;
$("[tabindex=8]").focus();
}
}
});
my html snippets
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input autocomplete="off"
id="l01"
name="postcode"
next-focus tabindex="2"
ng-click="f01b.click_l01()"
ng-model="f01b.straat.t128postcode"
required
style="width:300px"
type="search">
</span>
</div>
</div>
the selector
<div>
<select id="l03"
name="land"
next-focus tabindex="4"
ng-click="f01b.click_l03()"
ng-model="f01b.straat.t128land"
required
style="width:300px">
<option style="display:none" value=""></option>
<option value="België">België</option>
<option value="Nederland">Nederland</option>
</select>
</div>
the initialization in my controller
vm.init = function (){
vm.straat.t128straat = gService.waarde;
if (gService.cu.landversie==="B"){
vm.straat.t128land = "België";
$("#l03").val("België");
} else if (gService.cu.landversie==="NL"){
vm.straat.t128land = "Nederland";
$("#l03").val("Nederland");
}
$("[tabindex=2]").focus();
};