[RESOLVED] 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>&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"

     <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

[szlamany]

You are trying to visit the server with an AJAX call for each and every keyup event?

Have you had success doing something that heavy?

[vuyiswamb]

what i do i go once into the database and store the data in a server Catche and go and query that catch if the catch has data.

Except keyup which other event for the textbox can you suggest and in this situation how can i implement the delay Jquery function and clear the que so that the request cannot be fired every keyup.

[szlamany]

I've had really good experiences with downloading entire "search lists" in a single call to the server - and kept that local in the client and then used jQuery autocomplete type widgets to work the data.

Very fast experience for the user.

[vuyiswamb]

That is exactly what i am doing , but is the Keydown a good event to handle this ?

[vuyiswamb]

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

 

ko.cleanNode(document.getElementById("tblsearchresults"));