Results 1 to 6 of 6

Thread: [RESOLVED] Rebinding Problem with Jquery knockout.js with MVC

  1. #1

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

    Resolved [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

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Rebinding Problem with Jquery knockout.js with MVC

    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?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

    Re: Rebinding Problem with Jquery knockout.js with MVC

    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.

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Rebinding Problem with Jquery knockout.js with MVC

    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.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

    Re: Rebinding Problem with Jquery knockout.js with MVC

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

  6. #6

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width