Tag Archives: XSLT

XSLT and jQuery Samples

I have been doing a lot of of XSLT and jQuery and thought I’d share a few snippets that others may find useful in future.

Example 1: Emit simple JavaScript / jQuery in XSLT:

<xsl:template match="something" xml:space="preserve">

  <!– Blank out the query friendly filters hidden field –>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#QueryFriendlyFilters").val("empty");
    });
  </script>

</xsl:template>

That bit emits some JavaScript that waits for the page to finish loading (because of the $(document).ready(…)) and then sets the value of a hidden field named QueryFriendlyFilters to the literal value “empty”.

Example 2: Use <xsl:if> to check “greater than”,  “less than”, etc.

<xsl:template match="something" xml:space="preserve">

  <div id="fdcAllFilters">
 
    <xsl:if test="@Count>0">
      <span class="fdcFilterLabel">Current filters:</span>
    </xsl:if>

    <!– more stuff happens here. –>

</xsl:template>

The above snippet checks to see if an attribute named “Count” of the “something” element is greater than zero.  The XML behind this would be something like:”

<something Count=”5” />

Example 3: Iterate through all elements, interspersing jQuery calls.

<!– Iterate through all the filters and display the correct  links. –>
<xsl:for-each select="UserFilter">

  <a class="FilterHref" href="javascript:mySubmitPage(‘RemoveUserFilter’,'{@ID}’)">[X]</a>

  <span class="fdcFilterLabel"><xsl:value-of select="@FilterValue"/></span>

  <script type="text/javascript">

    $(document).ready(function(){
        <xsl:text><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></xsl:text>\"<xsl:value-of select="@FilterValue"/>\"<xsl:text><![CDATA["));]]></xsl:text>
    });

  </script>

</xsl:for-each>

The above snippet is the most complex and there may be easier ways to do it.

The XML behind this looks roughly like this:

<UserFilter ID=”123” FilterValue=”xyzzy” />

This snippet is iterating through <UserFilter> nodes. 

It first emits an anchor tag that when clicked invokes a JavaScript function that is already on the page, “mySubmitPage” and passes the value of an attribute on the <UserFilter> node named “ID”. 

It then emits some jQuery that waits for the page to load.  That jQuery updates a hidden field named “QueryFriendlyFilters” by adding the value of the FilterValue attribute.  Note all the crazy <xsl:text> and <![CDATA[ … ]]> stuff.

That’s it, hope it helps!

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Endlessly Nesting <div> Tags and jQuery

This seems like such an oddball topic, I’m not sure it’s really worth blogging about, but that’s never stopped me before, so here we go Smile

I’m working out on a project where I’m pulling some data from a search, packaging it up into an XML message and then that XML is ultimately transformed into HTML via XSLT.  There’s a lot of jQuery involved, one bit of which implements some tabbing functionality.  When you click on a tab (really, a <div>), jQuery invokes .hide() and .show() on various divs (the initial page load downloads all the content so there are no postbacks in this case).

A bunch of hours ago, the tab switching logic started to behave erratically and it wouldn’t show one of my tabs.  I ultimately tracked it down to the fact that internet explorer (at least) thought that the <div> tags nested far, far deeper than intended.The developer toolbar would show:

-<div id=”Tab1Content”>
  -<div>
    -<div>
      -<div id=”Tab2Content”>
        -<div>
           …………………………
                   </div>  <—finally showing it was closed all the way down here!

So, if I did a $(“#Tab1Content”).hide(), I’d also hide Tab2 and I could never show Tab2 if I didn’t also show Tab1.  I copied and pasted the code up into visual studio and it showed all of the div’s lining up nicely, just like they were supposed to be doing, looking like this:

-<div id=”Tab1Content”>
  +<div>
  +<div>
-<div id=”Tab2Content”>
  +<div>
  +<div>

I beat my head against the wall for a while and noticed that in the actual HTML code was generating a lot of empty <div> tags, like:

<body>

  <div id=”Tab1Content”>

    <div id=”row1” />
    <div id=”row2” />

  </div>

  <div id=”Tab2Content”>

    <div id=”row1” />
    <div id=”row2” />

  </div>

</body>

(The above is waaaaaaaaaaaay oversimplified.  The empty div tags are totally valid. Some of my <div> tags were full of content, but many more were not.  I came to the realization that my <xsl:for-each> directives were emitting the short-form div tags when the xsl:for-each didn’t’ find any data.  I forced an HTML comment into the output, as shown:

image

 

After I did that, all the div’s lined up nicely and my tab switching started working.

As always, I hope this helps someone in a pinch.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Example: XSLT Creating HTML Href’s

I’ve been doing a bit of XSL stuff lately and thought I’d put together a sample for my future reference and that may be of value to all of us XSLT-ers making a living in the internets.

Consider the following XML:

<FdcSearchTabsCollection Count="2">
  <SearchTab Label="Industry" SortOrder=”00” Label=”Industries” SearchConstraints="contenttype:Industry" TabID="831b2a74-98c4-4453-8061-86e2fdb22c63"/>
  <SearchTab Label="Practices" SortOrder=”01” Label=”Practices” SearchConstraints="contenttype:PracticeGroups" TabID="678e206b-6996-421f-9765-b0558fe1a9c0"/>
</FdcSearchTabsCollection>

The following XSL snippet will generate a sorted list of hrefs tabs:

<xsl:template match="FdcSearchTabsCollection" xml:space="preserve">
   
    <!– The "all" tab –>
    <a href="javascript:ViewTab(‘All’)">View all</a>
   
    <!– Each individual tab –>
    <!– Iterate through all the Tabs and display the correct  links. –>
    <xsl:for-each select="SearchTab">
      <xsl:sort select="@SortOrder"/>

      …
      <a href="javascript:ViewTab(‘{@TabID}’)"><xsl:value-of select="@Label"/></a>
    </xsl:for-each>

    <br/> 
   

   </xsl:template>

Here’s what it looks like in SharePoint:

SNAGHTML78aa2cb

 

 

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin