[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>&nbsp;</td>
        </tr>
        <tr>
            <td>Model:</td>
            <td>
                <div data-bind="text: Model">
                </div>
            </td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</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

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"));

---