[RESOLVED] Rebinding Problem with Jquery knockout.js with MVC
Good Day Guys
This is an MVC , JQuery, KNockout.js Question.
i have a Controller Action that is being Defined like this
Code:
[HttpGet]
public JsonResult SearchCars(string searchString)
{
string[] searchTerms = (searchString).ToUpper().Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries);
string[] searchTermSounds = new string[searchTerms.Length];
var list = (from r in Cache.CarSearchItems
select new Lightstone.UI.Web.LaceWebUI.Models.CarItem(r, searchTerms, searchTermSounds)).ToList();
var list1 = list.Distinct()
.Take(5)
.OrderByDescending(l => l.Hits).ToList();
return Json(list1, JsonRequestBehavior.AllowGet);
}
and i have a Jquery function that gets fired onkey up event is fired in a textbox like this
Code:
$(function () {
$("#txtSearchString").keyup(function () {
$("#txtSearchString").queue(function
() {
var _this = $(this);
_this.addClass("newcolor");
_this.dequeue();
});
if ($("#txtSearchString").val().length >= 3) {
var data = {}
data.searchString = $("#txtSearchString").val();
alert("Retrieving Data");
$.getJSON("/Cars/SearchCars", data, function (result) {
//Autocomplete binding
var viewModel = null;
viewModel =
{
SearchOptions: ko.observableArray(result) // These are the initial options
}
alert("Done Retrieving Data");
if (viewModel == null || viewModel == undefined) {
alert("The ViewModel is null or Undefined");
alert("Done with the View Model");
}
else {
ko.applyBindings(viewModel);
alert("THe View Model is no Null");
}
});
}
})
});
dont mind my alerts i use them to check the code reaches the place that i want it to reach. I can get the Jason the first time and this is the order of my alerts
Code:
alert("Retrieving Data");
alert("Done Retrieving Data");
alert("THe View Model is no Null");
and then i bind the data to my HTML view as depicted below
Code:
<table id="tblsearchresults" data-bind="foreach:SearchOptions" class="auto-style1">
<tr>
<td rowspan="5">
<img data-bind="attr: {src: Url}" class="" />
</td>
<td>Make:</td>
<td>
<div data-bind="text: Make">
</div>
</td>
<td> </td>
</tr>
<tr>
<td>Model:</td>
<td>
<div data-bind="text: Model">
</div>
</td>
<td> </td>
</tr>
<tr>
<td>Year:</td>
<td>
<div data-bind="text: Year">
</div>
</td>
<td> <a data-bind="attr: { href: UrlRedirect }">
View Report</a>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
and i see the data when i search for the first time and the images appears nicely and then the Problem start when i change my search string lets say i now type "FORD"
Code:
<input id="txtSearchString" name="txtSearchString" class="searchText" />
and it does not return results, when i look at the F12 debugging tool in chrome it point to my JavaScript in the following line
Code:
ko.applyBindings(viewModel);
and in my
Code:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 knockout-2.1.0.js:46
a.e.Fa knockout-2.1.0.js:46
a.a.Oa knockout-2.1.0.js:81
a.Fb.a.h.disposeWhenNodeIsRemoved knockout-2.1.0.js:75
e knockout-2.1.0.js:34
a.h knockout-2.1.0.js:36
a.Fb knockout-2.1.0.js:75
a.c.template.update knockout-2.1.0.js:76
a.c.foreach.update knockout-2.1.0.js:66
a.h.disposeWhenNodeIsRemoved knockout-2.1.0.js:51
e knockout-2.1.0.js:34
a.h knockout-2.1.0.js:36
d knockout-2.1.0.js:49
c knockout-2.1.0.js:49
b knockout-2.1.0.js:49
c knockout-2.1.0.js:49
b knockout-2.1.0.js:49
c knockout-2.1.0.js:49
b knockout-2.1.0.js:49
c knockout-2.1.0.js:49
b knockout-2.1.0.js:49
c knockout-2.1.0.js:49
b knockout-2.1.0.js:49
c knockout-2.1.0.js:49
a.xa knockout-2.1.0.js:52
(anonymous function) AutoCompleteResults.js:33
jQuery.Callbacks.fire jquery-1.7.2.js:1075
jQuery.Callbacks.self.fireWith jquery-1.7.2.js:1193
done jquery-1.7.2.js:7538
jQuery.ajaxTransport.send.callback jquery-1.7.2.js:8324
So everytime i do my search for the first time it works but for the second time it does not.
One other solution that i need is to delay the call of the keypress for 250 milliseconds.
Thanks
Re: Rebinding Problem with Jquery knockout.js with MVC
The Problem happens when Knockout tries to Bind the ViewModel to the same node multiple times. seting the viewmodel to null will not work , so to resolve this i explicidly binded the tablelement, and after that i clear the node before i bind a Viewmodel
Code:
ko.cleanNode(document.getElementById("tblsearchresults"));