TableOfContents == Introduction == AJAX stands for Asynchronous Javascript and XML. It is used to allow frontend html/javascript communicate with the

Table of Contents 

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:

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

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>" method="post" 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" /> </form>

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, "");