Copied to clipboard

Flag this post as spam?

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


  • IAMMRBONGO 29 posts 49 karma points
    May 18, 2011 @ 11:50
    IAMMRBONGO
    0

    umbraco.library:AddJquery() not working in XSLT

    Hi all,
    I'm trying to add jquery to the head of my macro. I want it to grab the latest version all the time. Nothing is appearing in the output though. Can I only use this library function in the template rather than in a macro. I tried setting head to runat server but obviously this isn't going to work as it's essentially just a text file that gets parsed.

    Another problem I face here is that the xsl is parsing the script tags into single self closing entities, is there any way to stop this behaviour from occuring while maintaning XHTML compliance. Thanks 

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour ">


    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>

    <xsl:variable name="thumbWidth" select="number(90)" />
    <xsl:variable name="thumbHeight" select="number(90)" />


        <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <!-- HEADER -->
          <head runat="server">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title><xsl:value-of select="$currentPage/galleryName"/></title>
            <!-- Add the Latest Version of J-Query -->
            <xsl:value-of select="umbraco.library:AddJquery()"/>
            <!-- Lightbox script -->
            <script type="text/javascript" src="/scripts/js/jquery.lightbox-0.5.js"></script>
            <!-- My Carousel Script -->
            <script type="text/javascript" src="/scripts/js/carousel.js"></script>
            <!-- TODO: Add once other bits complete -->
            <!-- Stylesheet for the Gallery -->
            <link rel="stylesheet" type="text/css" href="/css/Carousel.css" media="screen" />
            <!-- Instantiate Script -->
            <script language="text/JavaScript">    
                $(function () {
                $('#gallery a').lightBox();
                $('#galleryPanel').carousel({ xmlURL: "Test.xml" });
            });
          </script>
          </head>
        <!-- /HEADER -->
          <!-- Get the media Folder id for use later in getmedia -->
          <xsl:variable name="mediaFolderId" select="$currentPage/mediaLibraryID" />
          <!-- MEDIA LIBRARY: <xsl:value-of select="$mediaFolderId"/><br/> -->
          <!-- Check a number was returned from the previous select -->
          <body style="background-color:#555555;">
            <div id="mainPicture">
            <div id="jquery-lightbox">
            <div id="lightbox-container-image-box">
              <div id="lightbox-container-image"><img id="lightbox-image"/>
                    <div id="lightbox-loading">
                        <a href="#" id="lightbox-loading-link">
                          <!-- Todo: NoScripts Tag -->
                          <img src="images/lightbox-ico-loading.gif"/>
                        </a>
                    </div>
                    <div id="lightbox-container-image-data-box">
                      <div id="lightbox-container-image-data">
                          <div id="lightbox-image-details">
                              <span id="lightbox-image-details-caption"></span>
                              <span id="lightbox-image-details-currentNumber"></span>
                          </div>
                          <div id="lightbox-secNav"></div>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
          </div>
          <xsl:if test="number($mediaFolderId)">
          <!-- Loop through the media folder nodes to find the image URL -->
          <xsl:for-each select="$currentPage/GalleryImage">
            <!-- Set a variable to the image ID To see if it exists in the media library -->
            <xsl:variable name="imageId" select="galleryImage"/>
            <!-- Set a second variable to the image caption -->
            <xsl:variable name="caption" select="galleryCaption"/>
            <!-- Loop through the media library to find the image -->
            <xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">
            <!-- check that the umbraco file was found -->

              <xsl:if test="umbracoFile != ''">
                <!-- Match the 2 for loops on image ID -->
                <xsl:if test="@id = $imageId">
                  FILE: <xsl:value-of select="umbracoFile"/><br/>
                  <img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&amp;width={$thumbWidth}&amp;height={$thumbHeight}&amp;Crop=resize&amp;Constrain=true" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" class="thumbnail" />

                  ID: <xsl:value-of select="@id"/><br/>
                  Caption: <xsl:value-of select="$caption"/><br/>
                </xsl:if>
              </xsl:if>
            </xsl:for-each>  
          </xsl:for-each>  
            
          </xsl:if>
          </body>
        </html>
        </xsl:template>
        
    </xsl:stylesheet>

  • aghy 129 posts 308 karma points
    May 18, 2011 @ 12:08
    aghy
    0

    Hi Mr Bongo,

    Not sure why AddJquery isn't working. But if you change xml to html in the output method then the tags wont self close

    <xsl:output method="xml" omit-xml-declaration="yes"/>
    <xsl:output method="html" omit-xml-declaration="yes"/>

    Or you could try using <xsl:comment >< /xsl:comment> in those tags that self close I think this should stop them.

    Ben

  • aghy 129 posts 308 karma points
    May 18, 2011 @ 12:31
    aghy
    0

    I've just noticed that you have your whole html page within this xlst file, are you sure you want to do it like that?

    If you use the templates then you can use runat="server" but I doubt that would fix the AddJquery function. I would use a single version of jQuery instead of getting the latest.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    Then you wont have problems if the new version breaks old code.

    Ben

  • IAMMRBONGO 29 posts 49 karma points
    May 18, 2011 @ 13:15
    IAMMRBONGO
    0

    Hi Ben,
    Thanks for the response. It's great that people spend so much time helping people on-line. I'm using XHTML and want to carry on using it but I don't think my scripts are actually running. When they render to the client they will automatically become self enclosing in the DOM but they won't run unless they weren't served as no enclosing tags.

    The reason I've opted for doing it this way (all in a single parse rather than using a template) is that I want to modify the script in the head eventually so that I can call the xml file in ajax from the page itself depending on what media library I am using.

    I may take your advice though anyway and nest the title and script in the head instead.

    It's very peculiar that the jquery registration isn't working though. One of the reasons that I really like the idea of running the jquery from the header is that I really only want the latest version of jquery running on the site. It's strange that the bundled version of jquery used in Umbraco is a set version. I guess this makes sense as they don't know if their script is going to run in the future but the other dev here really doesn't like the idea of multiple versions of JQuery on the server as it gets confusing.

    I am not 100% sure I agree but he is the boss

  • aghy 129 posts 308 karma points
    May 18, 2011 @ 16:13
    aghy
    0

    "The reason I've opted for doing it this way (all in a single parse rather than using a template) is that I want to modify the script in the head eventually so that I can call the xml file in ajax from the page itself depending on what media library I am using." - Not sure I understand. If you explain what you are trying to achive I can try and suggest a better way for you to do it because doing it all in xslt can't be the best way. Also, unless its in your template, it looks like your missing the doctype.

    "but the other dev here really doesn't like the idea of multiple versions of JQuery on the server as it gets confusing." - Instead of downloading it and hosting it from your server you can link to googles servers using the script tag from my other post.

    Happy to help

    Ben

  • IAMMRBONGO 29 posts 49 karma points
    May 19, 2011 @ 16:55
    IAMMRBONGO
    0

    Thanks Ben.

    You am di best

Please Sign in or register to post replies

Write your reply to:

Draft