
Web 2.0 and Jahia: Using jQuery in Jahia


Feb 01, 2010
Want to learn how to implement a jQuery plugin as a module in Jahia? First, we’ll add the same module twice in a page but passing different parameters to each module to change the appearance of both. Then we’ll implement AJAX in one module. Let’s imagine we are building a site in Jahia to sell products. The common things we find in a product page are product images, product descriptions, advertisements, etc. For our product page we are adding a rating module that will allow us to show our score of the product, scores from another source (e.g. Other Website or Magazine) and let users rate the product and show their score too. We built a jQuery plugin that will allow us to display rating results. Plus letting the website visitor to rate the product in a simple way. In the image below we see how the plugin can show information, and how it lets the user rate the product using the slider. It is simple to show the rating module like in the second example.
To make the plugin work you need the following:
Include jQuery, uirateit plugin js and its css file.
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript” src=“uirateit.js”></script>
<link rel=“stylesheet” type=“text/css” href=“uirateit.css” />
Then build the HTML with the next structure.
<div class=“ratemodule” style=“width:300px; height:133px; “>
<ul class=“score”>
<li class=“bigscore”>
<span>MySite.com Score</span>
<span>8.5</span>
<span>Awesome</span>
</li>
<li class=“smallscore”>
<span>8</span>
<span>Critic Score</span>
<span>32 review</span>
</li>
<li class=“smallscore”>
<span>8.5</span>
<span>User Score</span>
<span>32 review</span>
</li>
<li class=“yourscore”>
<span>NA</span>
<span>User Score</span>
<span>please slide to rate</span>
</li>
</ul>
</div>
and finally
<script type=“text/javascript”>
$(document).ready(function({barwidth: 191}){
$(‘. ratemodule ‘).uirateit();
});
</script>
Now we’ll implement the same plugin as a module in Jahia, so Content Editors can add the module to product pages customizing the view with different parameters.
In your definitions.cnd file add the next lines:
<ajax = ‘oshyn.com/~jahia~/~ajax~/~nt~/1.0’>
[name_of_templates:rateModule] > jnt:container
smallText siteMessage
smallText siteRate
smallText firstHeadline
smallText firstMessage
smallText firstRate
smallText secondHeadline
smallText secondMessage
smallText secondRate
smallText userHeadline
smallText userMessage
smallText moduleWidth
smallText webSiteName
smallText nameClass
[name_of_templates:moduleBox] > jnt:box
containerList rateModuleList (ajax:rateModule)
[name_of_templates:home] > jnt:page
containerList columnBox (jnt:box[availableTypes=“jnt:IframeBox,ajax:moduleBox”])
[name_of_templates:rateModule] > jnt:container
will be our new module that inherits from container. We declare all the fields that the editor would be able to modify in the template.
After that we add the module container to our template
<template:boxList name=*”columnBox”* id=*”columnBox”* actionMenuNamePostFix=*”boxes”* actionMenuNameLabelKey=*”boxes”*>
<template:container id=*”moduleBox”* actionMenuNamePostFix=*”box”* actionMenuNameLabelKey=*”box.update”* cache=*”false”* >
<template:box displayTitle=*”true”* id=*”columnBox”* onError=“${jahia.requestInfo.normalMode ? ‘hide’ : ‘default’}”/>
</template:container>
</template:boxList>
Finally we must create a display for our module following the Jahia naming convention.
Create a file under common/box/display/moduleBoxDisplay.jsp
with next code.
<template:containerList name=*”rateModuleList”* id=*”rates”* actionMenuNamePostFix=*”rates”* actionMenuNameLabelKey=*”rates”*>
<template:container id=*”rateModule”* cache=*”off”* actionMenuNamePostFix=*”rate”* actionMenuNameLabelKey=*”rate.update”*>
<div class=*’*<template:field name=*”nameClass”*/>*’* style=*”width:300px; height:133px; position:relative; font-family:Arial, Helvetica, sans-serif;margin-bottom:20px;”*>
<ul class=*”score”*>
<li class=*”bigscore”*>
<span><template:field name=*”webSiteName”*/></span>
<span><template:field name=*”siteRate”*/></span>
<span><template:field name=*”siteMessage”*/></span>
</li>
<li class=*”smallscore”*>
<span><template:field name=*”firstRate”*/></span>
<span><template:field name=*”firstHeadline”*/></span>
<span><template:field name=*”firstMessage”*/></span>
</li>
<li class=*”smallscore”*>
<span><template:field name=*”secondRate”*/></span>
<span><template:field name=*”secondHeadline”*/></span>
<span><template:field name=*”secondMessage”*/></span>
</li>
<li class=*”yourscore”*>
<span>NA</span>
<span><template:field name=*”userHeadline”*/></span>
<span><template:field name=*”userMessage”*/></span>
</li>
</ul>
</div>
<script type=*”text/javascript”*>
$(document).ready(**function**(){
$(‘.’).uirateit({
barwidth: ~<~template:~field~ name=“moduleWidth”/~>~
}~,~ **function**(){
});
});
</script>
</template:container>
</template:containerList>
As soon as you deploy the templates on Jahia, you will be able to add the new module.
and have something like this on your site:

Related Insights
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.