HOW TO : Load Html from server side render

[boulepick]

Hello All,

i was wondering how to load redraw or the list after it has been rendered sever side with Handlebars. I do not want to reload the whole page only the list section. currently this is my code

    $MyList.jplist({
        //debug: true,
        itemsBox: '.list',
        itemPath: '.list-item',
        panelPath: '.jplist-panel',
        noResults: '.jplist-no-results',
        //deepLinking: true,
        storage: 'localstorage',
        storageName: 'jpList',
        cookiesExpiration: 300, //cookies expiration in minutes (-1 = cookies expire when browser is closed)
        //data source
        dataSource: {
            type: 'server',
            server: {
                //ajax settings
                ajax: {
                     url: '/list/filter',
                     dataType: 'html',
                     type: 'POST',
                     beforeSend : function(){
                        // display working hourglass
                     }
                },
                serverOkCallback: function() {
                    // stop working hour glass
                    // run local code
                },
                serverFailCallback: function() {
                    // something bad happend display error
                }
            }
        }
        // redrawCallback: function(collection, $dataview, statuses) {
                // console.log(collection);
        // console.log($dataview);
        // console.log(statuses);
            // }
    });

i'm using node,js express and handlebars server side, and the rendered html list looks like this:

  <div class="col-md-6 col-lg-4">
    <div class="panel">

      <div class="panel-heading">
        <h4 class="panel-title text-nowrap overflow-hidden mr-20">blandit ultrices enim lorem ipsum dolor sit amet<small class="display-block">4rwefwsd</small></h4>
        <div class="heading-elements">
          <ul class="icons-list">
            <li><a data-action="collapse"></a></li>
          </ul>
        </div>
      </div>

      <div class="panel-body text-size-mini">

        <div class="row">

          <div class="col-sm-4">
            <div class="form-group mb-5">
        .some info here
            </div>
          </div>

          <div class="col-sm-4 mb-5">
            <div class="form-group">
        some info here
            </div>
          </div>

          <div class="col-sm-4 mb-5">
            <div class="form-group">
        some info here
        </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
        other stuff in here
          </div>
        </div>

        <!-- Ratings row -->
        <div class="row">
          <div class="col-xs-12">
            <div class="input-group">
        again here
            </div>
          </div>
        </div>

      </div>

      <!-- Footer -->
      <div class="panel-footer panel-footer-condensed">
        <div class="heading-elements">
        footer elements here
        </div>
      </div>

    </div>
  </div>

[boulepick]

Figured my error, was not adding the class "list" to my list items., once i added them everything works find like the MySQL and PHP data source example. thank you