code snippets to replace dynamically the content of a div with some data form a data source inside symphony cms. helpful when showing a list of items and calling for a detail view in another div. code improvements very welcome! just happy that it runs as is.

gistfile1.xslt

//this goes into the page head of the page template (pagetemplate.xsl)
<xsl:template name="replace-javascript">
    <script type="text/javascript">
        <xsl:text>window.rePlace = {</xsl:text>
        <xsl:apply-templates select="/data/somenode/entry" mode="javascript"/>
        <xsl:text>};</xsl:text>
        $(document).ready(function()
    </script>
</xsl:template>

<xsl:template match="somenode/entry" mode="javascript">
    <xsl:text>"</xsl:text>
    <xsl:value-of select="./@id"/>
    <xsl:text>": {</xsl:text>
    <xsl:text>"firstname": "</xsl:text><xsl:value-of select="firstname/text()"/><xsl:text>",</xsl:text>
    <xsl:text>"lastname": "</xsl:text><xsl:value-of select="lastname/text()"/><xsl:text>"</xsl:text>
    <xsl:text>}</xsl:text>
    <xsl:if test="not(position() = last())">
        <xsl:text>, </xsl:text>
    </xsl:if>
</xsl:template>

//this goes into the page (mypage.xsl)where output happens, directly before the specific div (couldn't get it to work otherwise, will still try)
<script type="text/javascript">
<xsl:text> window.rePlace = {</xsl:text>
<xsl:apply-templates select="/data/somenode/entry" mode="javascript"/>
<xsl:text>}; </xsl:text>
</script>

<script type="text/javascript">
$(document).ready(function() {
  $('span.lnk').on('click', function() {
    var id = $(this).attr('title'), obj = window.rePlace;
          $('#target_div').html('<div class="content">
<span class="label">'+obj[id]['firstname']+'</span></div>');
  });
});
</script>

//then you need a div to place the stuff:
<div id="target_div">start text</div>

//and you will need to create a section in symphony to populate the stuff first.
//we call the id we pass to javascript this way(it'S a list with things to choose; once one is chosen, detailed info will be displayed in another div without page reload):
<xsl:for-each select="somenode/entry">
   <li class="sub">
    							<span title="{./@id}" class="lnk"><xsl:value-of select="sometext" /></span>
									</li>
                </xsl:for-each>