Introduction #

AJAX stands for Asynchronous Javascript and XML. It is used to allow frontend html/javascript communicate with the backend. For example, during a form submit, instead of using HTML forms to POST, AJAX can be used to do an asynchronous javascript POST to a backend script. The backend script will then return a value and javascript again will be used to modify html elements to display the return result. Many web applications are heavy users of AJAX including Liferay, Gmail, and Facebook.

For more information about AJAX, see Wikipedia - AJAX (Programming)

AJAX in Liferay 6 #

As of Liferay 6, there is AJAX support built into its current javascript library, Alloy UI.

AJAX in Liferay 5 #

In Liferay 5.1, the AJAX toolkit has been obsoleted. The recommended method for Liferay 5 was using jQuery's AJAX API (see Liferay UI Guidelines). For an example AJAX form submission using JQuery and JSP see Ajax in Liferay 5.

AJAX in Liferay 4 (AjaxUtil) #

Liferay 4 used a Liferay-specific utility called AjaxUtil to allow users to easily write Ajax. This has since been deprecated.

AjaxUtil.update() #

The javascript AjaxUtil.update() invokes the URL to retrieve this HTML fragment, and replaces the contents of the HTML element specified in the second parameter with the returned HTML.

For example, you have a portlet that has a div layer in it, we will call it library. Then you have a page that has a form, for example:

 First Name: <input type="text" name="fn" />
 Last Name: <input type="text" name="ln" />

and lets say that that form exists at the struts path "/ext/library/form".

To use ajax to load that page without any refresh you would call:

 var url = "<portlet:renderURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"><portlet:param name="struts_action" value="/ext/library/form" /></portlet:renderURL>";
 AjaxUtil.update(url, "<portlet:namespace/>library");

This can be used for forms as well. To continue the library example:

 <portlet:namespace/>submitEntry = function(form) {
   var inputs = jQuery("input, textarea, select", form); 
   var url = form.action + "&" + inputs.serialize(); // see note below
   AjaxUtil.update(url, "<portlet:namespace />library");
 <form action="<portlet:actionURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"><portlet:param name="struts_action"  value="/ext/library/add_book" /></portlet:actionURL>"
 name="<portlet:namespace />fm"
 onsubmit="<portlet:namespace/>submitEntry(document.<portlet:namespace />fm); return false;">
 <input name="<portlet:namespace />redirect" type="hidden" value="<portlet:renderURL><portlet:param name="struts_action" value="/ext/library/success" /></portlet:renderURL>">
 Book Title:
 <input name="<portlet:namespace />book_title" size="20" type="text" value="">
 <input type="submit" value="Submit" />

will do an ajax submit of that form, and wherever your redirect in your class the ajax will redirect just the portlet, not your whole page so nothing changes on the backend.

AjaxUtil.submit() #

In Liferay 4.3 AjaxUtil also had a submit() function which submits forms. It encapsulates the functionality which does this:

 var inputs = jQuery("input, textarea, select", form); 
 var url = form.action + "&" + inputs.serialize();

so that the above submitEntry() function can be written as:

 <portlet:namespace/>submitEntry = function(form) {
   AjaxUtil.submit(form, "<portlet:namespace />library");

Disabled Input Elements, Radio Buttons and Checkboxes #

This submit() function ignores the disabled attribute of the <input/> elements which get serialized. I have adjusted /portal/portal-web/docroot/html/js/liferay/ajax.js to account for this. I've also added in a check for handling radion buttons and checkboxes.

'Previous code://'

 submit: function(form, options) {
   var url = form.action;
   var inputs = jQuery("input, textarea, select", form);
   var opts = options || new Object();
   var params = inputs.serialize();

'New code://'

 submit: function(form, options) {
   var url = form.action;
   var opts = options || new Object();
   var inputs = jQuery("input, textarea, select", form);
   for( var i = 0 ; i < inputs.length ; i++ ) {
     if( (inputs[i].disabled) ||
        ((inputs[i].type == "radio" || inputs[i].type == "checkbox") && !inputs[i].checked) ) {
       delete inputs[i];
   var params = inputs.serialize().replace(/=undefined&/g, "");

This means that disabled input elements do not get submitted with the form. This could be needed where more than one submit buttons exist on a form. Javascript onclick can be used to set the other submit buttons to "disabled", and so only the clicked submit button gets submitted.

Popups #

You could also display the result as a popup:

 <portlet:namespace/>submitEntry = function(form) {
   var popup = Liferay.Popup({modal: true,width:300});
   AjaxUtil.submit(form, popup);
 <portlet:namespace/>updateEntry = function(url) {
   var popup = Liferay.Popup({modal: true,width:300});
   AjaxUtil.update(url, popup);

You could also display a popup without going to the server for your response:

 <portlet:namespace/>showPopup = function(form) {
   var html = '<input class="button" id="ok_btn" value="OK" onclick="Liferay.Popup.close(this);" type="button">';
   var popup = Liferay.Popup({
    title: "My Title",
    message: html,
    modal: true,

Liferay.Popup({}) had the following options available:

  * modal (boolean) - show shaded background
  * message (string|object) - default HTML/object to display
  * noCenter (boolean) - prevent re-centering
  * height (int) - starting height of message box
  * width (int) - starting width of message box
  * onClose (function) - executes after closing

There were five (5) window states available within Liferay, for use in generating action URLs, for example:

 <portlet:actionURL windowState="<%= LiferayWindowState.NORMAL.toString() %>">

The class com.liferay.portal.kernel.portlet.LiferayWindowState extends javax.portlet.WindowState (see javadoc here)

The two which Liferay provided in addition to the javax ones are LiferayWindowState.POP_UP and LiferayWindowState.EXCLUSIVE. The one to use in combination with javascript Liferay.Popup() and AjaxUtil.update() is LiferayWindowState.EXCLUSIVE, as this renders purely the result of the portlet jsps without any extra HTML or other data added. LiferayWindowState.POP_UP is designed for use with iframes and non-ajax popups of the <a href="" target="_blank"/> type (i.e. a new browser window) and thus has various header and footer HTML added which is inappropriate for the ajax style popup.

0 Attachments
Average (3 Votes)
The average rating is 3.66666666666667 stars out of 5.
Threaded Replies Author Date
e para chamar um método no Portlet via Ajax? ricardo wolosker January 9, 2012 7:59 AM

e para chamar um método no Portlet via Ajax?
Posted on 1/9/12 7:59 AM.