HOW TO : Load Html from server side render
Closed this issue · 1 comments
boulepick commented
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 commented
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