We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 27780
    • 5 Posts
    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?
    • Use AJAX. Here's an example of using JQuery to do something similar, using tabs http://rtfm.modx.com/display/revolution20/Loading+Pages+in+the+Front-End+via+AJAX+and+jQuery+Tabs
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org