0

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

Edited by mike_2000_17: Fixed formatting

2
Contributors
1
Reply
3
Views
5 Years
Discussion Span
Last Post by stbuchok
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.