Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • MartinB 411 posts 512 karma points
    Sep 08, 2012 @ 20:49
    MartinB
    0

    Use document property to show javascript in XSLT

    Hi there

    I have a slideshow outputting some nodes from a source folder.

    I reuse this slideshow on different pages and on some on these i want to check a true/false property to hide the thumbnails.

    But how can check if the field has been checked in the middle of my javascript? 

    <xsl:template match="/">
      <xsl:if test="$currentPage/@nodeName = 'Limousine' or $currentPage/@nodeName = 'Artister' ">
        <xsl:text disable-output-escaping="yes">
          <![CDATA[
            <script type="text/javascript" src="/scripts/jquery.js"></script>    
            <script type="text/javascript">
              $(document).ready(function() {
                $('#header').after('<ul id="nav">').cycle({
                    fx:     'growX',
                    speed:  'fast',
                    timeout: 3000,
                    pager:  '#nav',
                    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
    
                        if ($(nextSlideElement).next().children('img').attr('data-href')!= undefined) {
                            $(nextSlideElement).next().children('img').attr("src",$(nextSlideElement).next().children('img').attr('data-href'));
                            $(nextSlideElement).next().children('img').removeAttr('data-href');
                        }
    
                    },             
                  pagerAnchorBuilder: function(idx, slide) {   
                    return '<li><a href="#"><img src="/umbraco/imagegen.ashx?image=' + ($(slide).children('img').attr('data-href')==undefined ? $(slide).children('img').attr('src') : $(slide).children('img').attr('data-href') ) + '&amp;width=125&amp;height=66&amp;Crop=resize" alt="" /></a></li>';             
                 }
                });
              });
            </script>
          ]]>
        </xsl:text>
      </xsl:if>
    
    </xsl:template>

    It's this part i want to leave out if the field is checked:

    pagerAnchorBuilder: function(idx, slide) {   
                    return '<li><a href="#"><img src="/umbraco/imagegen.ashx?image=' + ($(slide).children('img').attr('data-href')==undefined ? $(slide).children('img').attr('src') : $(slide).children('img').attr('data-href') ) + '&amp;width=125&amp;height=66&amp;Crop=resize" alt="" /></a></li>';             
                 }

    I've tried a number of different things directly in the javascript without any luck.

    I can of course make a second macro to output a global variable in the template that i can reference in the above, but i would rather like to learn how it's done in the same file (if possible?)

    Any hints are much appreciated!

  • Chriztian Steinmeier 2718 posts 8201 karma points MVP 4x admin c-trib
    Sep 09, 2012 @ 21:52
    Chriztian Steinmeier
    1

    Hi Martin,

    I can only recommend that you pull all that JavaScript out into a separate .js file - XSLT (or Razor for that matter) is definitely not the place to "build" JavaScript... there are of course exceptions, but this doesn't look like one to me.

    You'd be much better off having your JavaScript detect a "flag" in the DOM that would trigger the desired behavior(s), e.g., you could have the XSLT output a data-attribute on the list element: <ul id="nav" data-thumbnails="true"> - you could test that attribute with $('ul#nav').data('thumbnails') etc.

    That said, the way to test a boolean property is like this:

    <xsl:if test="$currentPage/propertyName = 1">
      <!-- do stuff -->
    </xsl:if>

    But doing that inside a chunk of JavaScript inside an XSLT is asking for trouble - you need to close the CDATA Section before you do it, and then open a new one after, which is where most people give up :-)

    I really didn't mean to go all "StackOverflow" on your question - but I've seen this problem enough times to know that it'll bite you hard at some point :-)

    Rule of thumb: Every time you use a CDATA Section to output something, chances are you're trying to use XSLT for something it wasn't built for.

    Another thing: Doing this, the risk/chance of outputting JavaScript with errors is many times higher, because you have no error-checking - not even color-coding - to help you.

    Please don't run away - I'd much rather help you all the way, than scare you off - really! 

    /Chriztian

  • MartinB 411 posts 512 karma points
    Oct 14, 2012 @ 19:40
    MartinB
    0

    Hi Chriztian

    Sorry for the _very_ late reply.

    I'll get back to this as your points are very valid and i don't mind that you took the time to carefully explain me the downfalls of doing it the way i did.

    So, of course i want to fix this :-)

Please Sign in or register to post replies

Write your reply to:

Draft