Posts Tagged ‘jquery’

Primefaces dialog framework: how to make it work

If you have tried some primefaces features, you have probably noticed than some of those pretty things in the official showcase don´t work straight and easy in the application you´re developing. The problem is that even the latest 4.0 version is bugged.

I have been trying to use a Dialog Framework, but there´s something missing from the JqueryUI library and I have found out that the only way to make it work was including an external one, like:

There´s something missing from the JqueryUI library and I have found out that the only way to make it work was including the jqueryUI library (with the h:outputScript component).

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns=""

<title>Enter Product Mapping</title>

<h:outputScript name="js/jquery-ui-1.10.4.custom.min.js"/>

<p:commandButton value="Map"
actionListener="#{managedBean.showDialog}" />


Importing the jqueryui library is the only way to let the browser find the dialog properties (like “draggable”, “resizable”, “width”…). So I could make the following method work:

public void showDialog(){

Map<String,Object> options = new HashMap<String, Object>();
options.put("contentHeight", 340);
options.put("height", 400);



It will open the dialog that you need to put in another page (in this case the dialog.xhtml file):

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<ui:composition xmlns=""
<title>Enter Product mapping</title>
<h:form id="form">

<h:panelGrid id="grid" columns="3">

<f:facet name="header">
<p:messages for="query" />

<h:outputLabel value="Username" />
<p:inputText id="username" value="#{managedBean.userName}" />
<p:message for="username" />

<h:commandButton value="Save" id="btn" process="@form" actionListener="#{managedBean.updateDialog}" />




The actionListener refers to a method in the managed bean class, that will process the submitted form.

To make it work you also need to add some properties in the faces-config.xml:








Jquery paginator for Liferay 6.1

This tutorial tells you how to make a custom jquery paginator in your liferay portlet.
This example is about photoalbums, but the page can contain whatever in the <div “image”>

The jquery file is specified in header-portlet tag in the liferay-portlet.xml :

<header-portlet-javascript>/js/jquery-1.8.3.js </header-portlet-javascript>

or in the jsp directly (as you can see below)

The code in the ViewPhotos.jsp is:

<script type="text/javascript" src="${renderRequest.contextPath}/js/jquery-1.8.3.js"></script>

 images = ImageLocalServiceUtil.getAllImagesbyAlbumId(albumId);
	String albumName= (String) request.getAttribute("albumName");
<div id="<portlet:namespace/><br />"><span style="color: blue;">Photogallery DEMO Version 0.X </span> 

<script type="text/javascript">
 var $jq = jQuery.noConflict(true); 
 }); </script>

<div id="wrapper-content">
<h2>Photo album Paginator</h2>

<div class="pagination">
 <li><a href="#" id="prev"><button>Previous</button></a>
 <li><a href="#" id="next"><button>Next</button></a></li>

<div id="content">
 No images found.
<div class="image">

 <img class="center" src="/<%=albumName=>/<%=path%>" alt="" width="40%" />


</div> <!--  content -->
</div> <!--  wrapper-content -->
</div>  <!--  portletnamespace -->

Remember to wrap it all with :  <strong><div id=”<portlet:namespace/>”></strong>

In my demo the “albumName” folder specified in the image attribute src is set in the xml file:

The content of the xml file is something the following:

<?xml version=”1.0″ encoding=”UTF-8″?>
<Context path=”/albumName” docBase=”/home/laura/albums/albumName” reloadable=”true”/>

albumName” might be something like “birthday_Party_Laura_2013

the jquery plugin (that I’ve placed in the main.js file) is the following:

(function($) {

	// Attach a new method to jQuery
		// PluginName - Pagination
		Pagination : function(options) {
			// Set the default values, use comma to separate the settings,
			// example:
			var defaults = {
					fadeSpeed : 100

			// options can be extended when the plugin is invoked
			var options = $.extend(defaults, options);

			// Creating a reference to the object
			var objContent = $(this);

			// child div of the "content" one
			var imageDivList = new Array();
			var lastPage = 1;
			var paginatedPages;

			// initialization function
			init = function() { // for each div
				$('.image').each(function() {

				// objContent.children().hide();

				// show first page (lastPage=1)

				// draw controls

			}; // end init function

			// show page function
			showPage = function(page) {
				i = page - 1;
				if (imageDivList[i]) {
					// hiding old page, display new one
					lastPage = i;


			// show pagination function (draw switching numbers)
			showPagination = function(numPages) {
				var pagins = '';
				for ( var i = 1; i <= numPages; i++) {
					pagins += '<li><a href="#" onclick="showPage(' + i
							+ '); return false;"><button>' + i + '</button></a></li>';
				} //     
				// after the firt element, with id="prev", append the list with
				// the page number links
				$('.pagination li:first-child').after(pagins);

			// perform initialization

			// and binding 2 events - on clicking to Prev
			$('.pagination #prev').click(function() {
			// and Next
			$('.pagination #next').click(function() {
				showPage(lastPage + 2);

	// pass jQuery to the function,

The css for the paginator buttons, that I have specified in the main.css file is:

ul, li {
    list-style-type: none;

.pagination {
    clear: both;
  /* width:250px; */

.pagination li {
        margin-left: 0 auto;