1rosehip/jplist

HOW TO : Load Html from server side render

Closed this issue · 1 comments

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>

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