Currently, I am utilizing mustache.js to display JSON data in a template. However, I have encountered an issue where Mustache is appending previous response data along with the new one when I make a $.ajax post request. How can I prevent Mustache from retaining previous data and only return the latest response?
Script
$.ajax({ type: 'POST',
url: 'actions/addpost.php',
data: {wallid: wallid, postmessage: postmessage, files: files},
dataType: 'json',
encode: true
})
.done(function (data) {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, data);
$('#newpost').prepend(rendered);
});
Template
<script id="template" type="x-tmpl-mustache">
<div class="panel panel-white">
<div class="panel-heading">
<label>UserID: {{ userid }}</label>
<span class="help-block">{{ date_created }}</span>
</div>
<div class="panel-body">
<div class="well-white well-sm">{{ post_text }}</div>
</div>
<div class="panel-footer">
<div id="attachmentlist">
{{ #attachments }}
<p>{{ filename }} ({{ filetype }})</p>
{{ /attachments }}
</div>
<br>
<div class="comment-textarea">
<form name="commentform">
<div class="comment-box media">
<a id="comment-box-a" class="pull-left" href="#">
<img class="media-object" src="source/images/nophoto.png" alt="...">
</a>
<div class="media-body form-group">
<textarea id="comment-box-msg" name="postMessage" class="form-control" row="1" placeholder="Write a comment..."></textarea>
</div>
<button id="comment-box-btn-post" class="btn btn-primary btn-sm pull-right" aria-hidden="true" type="button">Δημοσίευση</button>
</div>
</form>
</div>
</div>
</div>
</script>