Home
TeamSite
Jquery in XSLT
rajaramesh
Hi All, .
I wanted to implement Jquery in my XSLT, wanted to use the effects of Jquery(like treeview structure).
Has anyone tried using Jquery effects in XSLT. if yes, could you please guide me.
Environment :
Teamsite 7.2
Find more posts tagged with
Comments
Migrateduser
Have not used jquery but I do embed javascript and use dojo. All you need to do is remember is that the xslt is outputing html, so what ever you would do in html to use jquery make sure the output of the xslt is the same. We import all the required libraries through the site set up on the sitemap. Select the site > Select Edit Details > Scroll down to Shared Resources > Select Edit and add the javascript files.
This is what something we do looks like in the xslt:
[HTML]
<script src="$URL_PREFIX/resources/components/FAQ/faq-search/script.js" type="text/javascript"></script>
&amp;amp;lt;br&amp;amp;gt;
@import
url($URL_PREFIX/resources/components/FAQ/faq-search/style.css);&amp;amp;lt;br&amp;amp;gt;
<script type="text/javascript">
var getResults = function(){
var useKey = dojo.byId("userkey").value;
var sUri = '$PAGE_LINK[ajax-services/faq/faq-result]?userkey=' + useKey;
console.info(sUri);
var get = dojo.xhrGet({
url:sUri,
handleAs:'text'
});
get.addCallback(function(data){
dojo.byId("results").innerHTML=data
return data;
});
}
</script>
Search Our FAQ's Here
[/HTML]
Binettoid
I have done this. A lot.
The key for me was to build detailed HTML/Jquery prototypes of what you want. Then break it down into Components that make sense in LiveSite.
Then build the pages so that it all hangs together. As Cyberpop says, you need to include some css and js at both the global level and also some specific js and css at the page level for pages with special/extraordinary functionality. You can do it all globally at first and refactor later, but JQuery conflicts can cause you to have to refactor before you intended.
Chief pitfall: the rendering of LiveSite pages is filled with rubbish that will break your layout, and cause your css and js not to work. This can be overcome in one of two ways;
a) Start by removing the livesite rendering artifacts (lots of extra divs component wrappers, etc.) by altering the default layout.xsl file for your layout type. (usually a file called something_fixed_layout_something.xsl, in my case. You can find post about how to do this on this forum)
b) Lots of hard work and careful design will allow you to work around this stuff.
Without going into massive amounts of detail, that is the short story of how to do this. Lemme know, if you need more than this or have a specific question.