FrançaisEnglish

F.A.Q.

  1. How to use jQuery and jQuery UI in my skin ?
    1. For versions 3.0 to 3.1.x
      1. The jar file
      2. Call the JS
      3. Use the JS
    2. For versions 3.2+
  2. How can I link a basic html text input with the search engine ?
    1. Use auto-completion (for versions 3.2+)
  3. How to get the required level title from inputdata filters on contents ?
  4. How to display tranlations ?

How to use jQuery and jQuery UI in my skin ?

jQuery and jQuery UI are major JavaScript libraries for skin effects.

For versions 3.0 to 3.1.x

Plugins (as Multimedia) needs it, so using different version may conflict.
For that reason do not put the jQuery files in your skin (or your plugin) directly.

The jar file

The first step is to see if you have a jar named jquery-*.jar in your WEB-INF/lib directory. This is the case when depending of a plugin that already use jQuery.

If not you have to add it :

  • if you use ivy, add this to your ivy

        <dependency org="jquery" name="jquery" rev="1.4.2" conf="default"/>
    <dependency org="jquery" name="jquery-ui" rev="1.8.5" conf="default"/
  • if not, download the jar here http://viewvc.ametys.org/viewvc/ivyrep/external/jquery/jquery/ and put it in the WEB-INF/lib

Call the JS

In your skin you have to use the scripts.
There are 2 scripts, the expansed and the minified one.
For jQuery the relative urls are :

  • /plugins/jquery/resources/js/jquery.js
  • /plugins/jquery/resources/js/jquery.min.js

For jQuery UI the relative urls are :

  • /plugins/jquery-ui/resources/js/jquery-ui.js
  • /plugins/jquery-ui/resources/js/jquery-ui.min.js

Here is a sample in a skin :

<script type="text/javascript" src="{$contextPath}/plugins/jquery/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="{$contextPath}/plugins/jquery-ui/resources/js/jquery-ui.min.js"></script>

Use the JS

Declare an unique variable in your XSL :

  <xsl:variable name="uniqueId" select="substring-after(math:random(), '.')"/>

Use the unique variable to avoid jQuery conflict like following :

  // For no conflict
  var $j<xsl:value-of select="$uniqueId"/> = jQuery.noConflict();

  // Sample for use
  $j<xsl:value-of select="$uniqueId"/>("#myDiv").html('');

For versions 3.2+

jQuery and jQuery UI libraries are brought by web, so they are directly availables in your skin : you do not need to add jars and you do not need to import js.

You can directly use jQuery functions by using variable $j :

    $j().ready(function() {
        // ...


        $j(#myInput).autocomplete (...);

        $j.ajax({
		url: url,
		dataType: "xml",
		success: function(xml) {
		    // ...
	        }
        });
    }

How can I link a basic html text input with the search engine ?

Two actions are possible : redirect to the search page with or without launching the search. The search field will automatically be filled in.

In order to do this, you must follow these steps :

  • The action of the form must point to the page containing the search service.
  • Give "textfield" as name for you text input
  • Add a hidden field named "submit-form" if you want to launch automatically the search
<form action="{$cms-context}/{$lang}/search.html#nav" method="post">
   <input type="hidden" name="submit-form"/>
   <input type="text" name="textfield" value=""/>
   <input type="submit" class="submit" value="OK"/>
</form>

You can restrict search to some content types like following :

<form action="{$cms-context}/{$lang}/search.html#nav" method="post">
   <input type="hidden" name="submit-form"/>
   <input type="text" name="textfield" value=""/>
   <input type="hidden" name="content-types" value="org.ametys.web.default.Content.article"/>
   <input type="hidden" name="content-types" value="org.ametys.plugins.news.Content.news"/>
   <input type="hidden" name="content-types" value="resource"/>
   <input type="submit" class="submit" value="OK"/>
</form>

Use auto-completion (for versions 3.2+)

To use the auto-completion on your search input (available only for version 3.2+) you must follow these steps  :

  • Add xmlns:math="java.lang.Math" namespace to your xsl :
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                            xmlns:i18n="http://apache.org/cocoon/i18n/2.1"
                            xmlns:math="java.lang.Math"
                            xmlns:sitemap="http://www.ametys.org/inputdata/sitemap/3.0"
                            exclude-result-prefixes="sitemap math">

  • Declare a global variable uniqueIdwith unique identifier

    <xsl:variable name="uniqueId" select="substring-after(math:random(), '.')"/>

  • Add the following script on the section <head>:

    <script type="text/javascript">
   $j().ready(function()
   {
	function parseXML(data)
	{
		var results = [];
		var branches = $j(data).find('item');
		$(branches).each(function() {
		    var text = $j.trim($(this).text());
		    results[results.length] = {'data': [text, text], 'result': text, 'value': text};
		});
		return results;
	}

	var url = "<xsl:value-of select="$contextPath"/>/plugins/web/service/search/auto-completion/<xsl:value-of select="$site"/>/<xsl:value-of select="$lang"/>.xml";
	$j("#search-input-<xsl:value-of select="$uniqueId"/>").autocomplete({
		source: function( request, response ) {
		$j.ajax({
			url: url + "?q=" + request.term,
			dataType: "xml",
			success: function( xmlResponse  ) {
			   response( parseXML (xmlResponse));
		        }
	        });},
	        minLength: 2,
		delay: 500
	});

	});
</script>

  • Use the global variable uniqueIdfor the search input :

    <input type="text" name="textfield" id="search-input-{$uniqueId}"/>

How to get the required level title from inputdata filters on contents ?

The inputdata of filter content (cf Filters on contents) returns the data in this form:

<news-section>
    <content id="defaultWebContent://ef594708-c4f7-4c61-b46a-ed888acec9bc" name="new-new" title="New" lastModifiedAt="2010-08-11T14:18:07.092+02:00">
        <html>
            <head>
                <title>New</title>
                <meta content="2010-08-11T14:18:07.092+02:00" name="lastModificationRaw"/>
            </head>
            <body>
                <a href="/enit/preview/default/en/new.html">
                    <img alt="" src="/enit/preview/default/_contents-images/illustration/image_max100x100"/>
                </a>
                <span class="date">04.08.10 - 19.08.10</span>
                <h1>New</h1>
                <p>Pellentesque convallis diam. Consectetuer adipiscing elit. Etiam blandit euismod urna. Aenean condimentum consectetuer adipiscing elit odio et pede.
                    <a href="/enit/preview/default/fr/l-ecole/une-actualite.html">Read more</a>
                </p>
            </body>
        </html>
     </content>
</news-section>

In the template.xsl we display the results of the filter with this template :

    <xsl:copy-of select="html/body/node()"/>

But we want to display different levels of titles that h1 is used.

We begin by importing this xsl :

    <xsl:import href="workspace:web://stylesheets/helper/html-hierarchy.xsl"/>

Then we used this template :

    <xsl:apply-templates select="html/body/node()" mode="move-hierarchy">
        <xsl:with-param name="level" select="4"/>
    </xsl:apply-templates>

How to display tranlations ?

With plugin translation flagging, you have translation meta : but the meta can be positionned on non existing pages (deleted, not validated...)

Here a code to do so :

	
<xsl:variable name="raw-translations">
    <xsl:for-each select="/cms/page/metadata/translations/*">
        <xsl:variable name="hrefResolved" select="resolver:resolve('page', .)"/>
        <xsl:if test="$hrefResolved != ''">
            <xsl:element name="{local-name()}">
                <xsl:value-of select="$hrefResolved"/>	
            </xsl:element>			
        </xsl:if>
    </xsl:for-each>
</xsl:variable>
<xsl:variable name="translations" select="exsl:node-set($raw-translations)"/>

<xsl:if test="$translation/*">
    <ul> 
        <xsl:for-each select="$translation/*">
            <li>
                <a href="{.}"><xsl:value-of select="local-name()"/></a>
            </li>    
        </xsl:for-each> 
    </ul>  
</xsl:if>
Back to top

Integration