Rebinding Problem with Jquery knockout.js with MVC

[vuyiswamb]

Good Day Guys

This is an MVC , JQuery, KNockout.js Question.

i have a Controller Action that is being Defined like this

  [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

 $(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

  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

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

    <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

 ko.applyBindings(viewModel); 

and in my

 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

Use IE. In you code where you want to start debugging put debugger;

example:

> $("#txtSearchString").keyup(function () {
>        debugger;
>         $("#txtSearchString").queue(function() {
>             var _this = $(this);
>             _this.addClass("newcolor");
>             _this.dequeue();
>         });

You can then step through the code. You can also step through the code using the Developer Tool Bar, or use Firefox and step throgh the code there.