Use jQuery Within Wiki Pages

The extension is deprecated and this page is accessible only for historical reasons.

Please do not try to download and/or contact us regarding this extension.

This extension is related to the Classic Wiki technology that is now outdated and replaced by our new LivePage format. We still maintain Classic Wiki but we are no longer extending its feature set.

Please consider implementing the use case you are looking for using a LivePage.

What it does

This extension allows you to use jQuery and all of its features and visual plugins (e.g. jQueryUI) within a Wiki Page.  For example, you can use the jQuery method 'ready()' to execute JavaScript functions after a Wiki Page has loaded completly.

TAKE A LOOK AT THE SCREENSHOTS TO SEE WHAT IS POSSIBLE!

Installation

Copy the "custom" directory to your Polarion Installation:
# $POLARION_INSTALL_PATH/polarion/plugins/com.polarion.alm.wiki_3.4.3/src/main/webapp/

Please note that the directory name "com.polarion.alm.wiki_3.4.3" could be different for your Polarion Installation.

Usage

Insert following lines at the top of your Wiki Page:

{pre}
<script type="text/javascript" src="/polarion/wiki/custom/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/polarion/wiki/custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type='text/javascript'>var $j = jQuery.noConflict();</script>
<link rel="stylesheet" href="/polarion/wiki/custom/css/ui-lightness/jquery-ui-1.8.4.custom.css" type="text/css" />
{/pre}

Now you can use all jQuery methods within your Wiki Page!

NOTE:
The only thing you have to note is to use "$j" instead of "$" to access jQuery methods.
Otherwise you will use Polarion Prototype JavaScript framework!
For jQuery documentation please refer to http://api.jquery.com/.

Furthermore you can use features of jQueryUI to beautify your Wiki Pages.
For jQueryUI documention please refer to http://jqueryui.com/demos/.

See example section below to start without reading jQuery documentation ;-)!

Examples in Wiki Pages

Example 1 (jQuery functions)

(Include lines in "Usage in Polarion" section above)

<!--Using ready() function: -->
{pre}
<script type="text/javascript">
$j(document).ready(function() {
 <!-- Bind click Event on Button and do cool animations  -->
 $j("#toggle1").click(function() {
   $j("#h2").slideToggle(1000);
 }); 
 <!--
  Shows current license without Velocity or Java Code, just by getting DOM Element from HTML Site.
 "DOM_70" is the id of the Polarion DOM Element which displays the current licence.
  After we get the HTML-Content of the Element we parse it to get the licence string.
  -->
 $j("#licence").click(function() {
   var licence = $j('#DOM_70', top.document).html();
   licence.match(/.*(\..*,)/);
   var output = RegExp.$1;
   output = output.replace(/,|\./g,"");
   alert("You are using: " + output);
 }); 
 <!-- Shows a alert message after Wiki Page has been completly loaded. -->
 alert("I was executed at the end.");
});
</script>
{/pre}

<button id="toggle1"> Toggle Me </button>
<h2 id="h2">I am a Heading 2 -> click "Toggle Me" button.</h2>
<button id="licence"> Show me my Licence </button>

Example 2 (jQuery UI styles)

(Include lines in "Usage in Polarion" section above)

<!-- A container with round corners -->
<fieldset class="ui-widget-content ui-corner-all">
<legend>Looks good</legend>
Hello World!
</fieldset>

Help

- If there are any questions please write me an e-mail to s.frenzel@technisat.de

Tested on Polarion 2010

- Should also work with every other Polarion Version.


Tested Browsers

• Works fine with latest Firefox and Chrome.
• Internet Explorer has some problems with design elements of jQueryUI, but jQuery should work.

Enjoy...

Sandro Frenzel