Hey all,
I'm trying to dynamically change the content of a div with javascript. The goal is to narrow down the displayed blog posts to only those with a certain TV when the user clicks on the appropriate link.
The code below is what I currently have. Right now, when the user clicks on the link, the div is cleared instead of showing the desired blog posts.
This is the javascript code:
<script type="text/javascript">
function sortArticles(){
document.getElementById('articles').innerHTML = '
[[!getResources? &parents=`1` &tpl=`blogPost` &tvFilters=`Events==1` &processTVs=`1`]]
';
}
</script>
This is the link to change the div content:
<a href="#" onclick="javascript:sortArticles()">Show only events</a>
This is the target div:
<div id="articles">
[[!getResources? &parents=`1` &tpl=`blogPost` ]]
</div>
I realize that this is probably not the best way to go about it. Any ideas?