Using Knockout.Js, how to do refresh the ul when new data is binding to li?

Question

Really i'm struggling with knockout js for couple of days. because I'm new to this technology. I'm unable to do refresh the ul when new data is binding to li. Given below is my code.

 <ul data-role="listview" id="ListSearch" data-divider-theme="b" data-inset="true" >
         <li data-role="list-divider" role="heading">
              Criteria Selected
          </li>
          <!-- ko foreach: Contacts  -->
          <li data-theme="c">
              <a href="#page3" data-transition="slide" data-bind="attr: { title: ContactID }">
                  <span data-bind="text: FirstName + ' ' + LastName + ' (' + Classification +':'+ Position+ ')'"></span>
              </a>
          </li>
          <!-- /ko -->
      </ul>

Jquery Ajax Call:

    $.ajax({
            url: 'http://localhost:50043/api/contacts/filter',
            type: 'GET',
            dataType: 'jsonp',
            data: { ID: ClassificationPositionid },
            context: this,
            success: function (result) {
                 self.Contacts(result);
                $('#ListSearch').listview("refresh"); //throwing error.

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".divLoading").hide();
                alert(errorThrown);
            }
        });   

ListSearch is the id of UL. If i given as like above then it throwing below error.

    Uncaught TypeError: Object [object Object] has no method 'listview' 

How to fix this error? Please help me where I made mistake

Answer 1

Put given below code after error part in jquery ajax call,

     complete: function () {                 
                $('#ListSearch').listview('refresh');            
        } 

Important: 1) Don't load jquery after mobile plugin js 2)Don't load any jquery in body selection... Please load the jquery(jquery.min.js,knockout,...) first and then load mobile plugin js

Answer 2

If you get the error here $('#ListSearch').listview("refresh"); //throwing error., then simply it's a case that either:

• The jQuery Mobile ListView plugin is not loaded.
• The jQuery Mobile ListView plugin is loaded, but is not working.

Check which script files are loaded in your web page (browser dev tools via the F12 key, etc) to see which scripts are loaded. Maybe that jQuery file is missing?

EDIT:

In your position I would try the following - start a new project and only include jQuery and jQuery Mobile script files. Then Take the code:

<script type="text/javascript">
    $(function(){
        $('#ListSearch').listview("refresh");
    });    
</script>

and see if the above fails. If it does, then 100% there is something wrong with the jQuery mobile script. Try getting that script file from somewhere else, like downloading it from the jQuery site and including it in your project.

Basically strip the code down to the minimal amount and see what works.