Search

dear community, we are stuck in a symphony project which has a deadline and we had to overtake it for some reasons and finish it, although not symphony experts...not at all! see here: link text

we are diving slowly into the system and start to understand, but right now i'm stuck. i want to replace the conten of a div after clicking a link and don't know how to pass xsl-values into the javascript. here's what i got:

producing html to click on:

<article>
    <div class="article-content">
        <header>
            <h2>key people</h2>
        </header>
        <div class="content">
            <ul>
            <xsl:for-each select="keypeople/entry">
                <li class="sub">
                    <span title="{./@id}" class="lnk"><xsl:value-of select="detailed-name-display" /></span>
                </li>
            </xsl:for-each>
        </ul>
        </div>
    </div>
    <aside id="keypeople_detail">
        <div id="keypeople_mycontent">
            <div class="content">
                <span class="labelgrey_intro">the amazing individuals without whom this wouldn't be possible</span>
                <p class="intro">There is a huge team behind Mission Rabies and the brilliant individuals on the left are some of the key people who are putting heart and soul into driving this project forwards and making it all it can be.</p>
            </div>
        </div>
    </aside>
</article>

then here's my javacript snippet which should populate div 

<script type="text/javascript">
    $('span.lnk').live("click", function(){
        var id = $(this).attr('title');

        var name = '<xsl:value-of select="keypeople/entry[@id=124]" />';
        var name2 = name[2];
        alert(name)

        //alert (url);
        $('#keypeople_mycontent').html(name2);
        //<![CDATA[

        //]]>
    })
</script>

can somebody point me into the right direction?

furthermore, what could be the reason when a template is not applied but all the xml is passed as plain text to the browser?

many thanks in advance for any hints leading us along the way!

gregor

somehow the above was messed up, once again:

html:

<article>
    <div class="article-content">
        <header>
            <h2>key people</h2>
        </header>
        <div class="content">
            <ul>
                <xsl:for-each select="keypeople/entry">
                    <li class="sub">
                        <span title="{./@id}" class="lnk"><xsl:value-of select="detailed-name-display" /></span>
                    </li>
                </xsl:for-each>
            </ul>
        </div>
    </div>
    <aside id="keypeople_detail">
        <div id="keypeople_mycontent">
            <div class="content">
                <span class="labelgrey_intro">the amazing individuals without whom this wouldn't be possible</span>
                <p class="intro">There is a huge team behind Mission Rabies and the brilliant individuals on the left are some of the key people who are putting heart and soul into driving this project forwards and making it all it can be.</p>
            </div>
        </div>
    </aside>
</article>

js-snippet:

&lt;script type="text/javascript">
    $('span.lnk').live("click", function(){
        var id = $(this).attr('title');

        var name = '<xsl:value-of select="keypeople/entry[@id=124]" />';
        var name2 = name[2];
        alert(name)

        //alert (url);
        $('#keypeople_mycontent').html(name2);
        //<![CDATA[

        //]]>
    })
&lt;/script>

any and all hints that will lead us a bit on the way are very very welcome!

gregor

Not sure but your comment seems to be cut off.

Is the content to be replaced with always known before hand?

If so I woul suggest using a data-attribute in the html & replacing with js.

so you would have 

<div class='replaceable' data-replace='the new text'>Old text</div>

Otherwise if you want to use inline javascript use XSLT as normal (only issues would arise if you are using >, < and & inside your inline javascript in which case you might need to use CDATA tags.

&lt;script> $('.replceable').html("<xsl:value-of select='data/replace/entry/content'/>")&lt;/script>

obviously i can't even post to the forum correctly. when trying to edit the above i get errors. somehow the code is messing up the forum. could somebody delete the whole post so i can repost in clean way?

the content is known when a span is clicked. then the id of the node to replace the content is passed to javascript and should then, based on the id, replace the content in the div.

Attachments:
Bildschirmfoto 2013-05-20 um 10.17.08.jpg

looking at it; it should work; you think you could put up an xpathr gist quickly with your xml data (relevant part) and the xslt I'll try have a quick look at it; though there doesn't seem to be much wrong.

would love to, but getting errors from xpathr... other ways of communicating the relevant parts?

just a simple gist would do; i guess

https://gist.github.com/anonymous/2dd6c8793d5d5cbf7365

one more question, what could be the reason a template is not executed? the xml is given back to the browser as plain text in a specific area.

Looking at it I think you're missing a for-each..

$('span.lnk').live("click", function(){
    var id = $(this).attr('title');

    var name = '';
        <xsl:for-each select='/data/keypeople/entry'>
            var name["<xsl:value-of select='@id'"] = '<xsl:value-of select="description"/>';
        </xsl:for-each>        
    var name2 = name[id];
    alert(name)
      $('#keypeople_mycontent').html(name2);
        //

//
  })

https://gist.github.com/ma8bi4ne/c5371c3997a2651245f5 this shows what my browsers console is giving back now.

i am now getting the corresponding values for the ids, but am too stupid to read and print them. how would i create an ioutput for the corresponding id? the one in the gist is not working.

Not sure; maybe could be relating to some use of cdata blocks.. if you had to console.log(firstname[id]) what would you get?

can it be that it generates no output? in firebug/console i don't see anything related.

it could; the data you are trying to output; is it encapsulated in a cdata block?

only one part, but it's not even called yet. this will be later.

still stuck with this. javascript not workin at all(which i am not surprised of since i just started with javascript) any hints?

gist of problem

Just been and re-formatted your code examples for you. There were missing opening tags for <article>, hence the wonky display. Also, all code needs to be correctly nested and indented by one tab, or 4 spaces for it to display correctly.

I'm jusy reading through and looking at your problem now.

Ok. With JavaScript output from xslt, it's beneficial to make life easy for yourself by using the power that templates affords you, and abstract out what you need to achieve.

JavaScript works best by using objects, as it is an Object based language, so using templates, we can create objects with xsl:for-each or, what would be better here (for abstraction) xsl:template-match.

Take a look at the example below, and see if you can get it working in your site:

<xsl:template name="keypeople-javascript">
    &lt;script>
        <xsl:text>window.keyPeople = {</xsl:text>
        <xsl:apply-templates select="/data/keypeople/entry" mode="javascript"/>
        <xsl:text>};</xsl:text>

        $(document).ready(function() {
            $('span.lnk').live('click', function() {
                var id = $(this).attr('title'),
                    obj = window.keyPeople;

                // Now you have your 'id' and the 'obj' you can access the object created earlier
                // using syntax like: obj[id]['firstname']

                console.log(obj[id]['firstname'], obj[id]['lastname'], obj[id]['funktion'], obj[id]['country'], obj[id]['description']);

                // Your code here!
            });
        });
    &lt;/script>
</xsl:template>

<xsl:template match="keypeople/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>"funktion": "</xsl:text><xsl:value-of select="function/text()"/><xsl:text>",</xsl:text>
    <xsl:text>"country": "</xsl:text><xsl:value-of select="country/text()"/><xsl:text>",</xsl:text>
    <xsl:text>"description": "</xsl:text><xsl:value-of select="description/text()"/><xsl:text>"</xsl:text>
    <xsl:text>}</xsl:text>
    <xsl:if test="not(position() = last())">
        <xsl:text>, </xsl:text>
    </xsl:if>
</xsl:template>

It goes without saying, you will want to fix the opening and closing JS tags ;o)

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details