Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why
« Back to AJAX

Ajax in Liferay 5

Form submission #

As of Liferay 5 , form submission is done using JQuery and the LiferayWindowState.EXCLUSIVE window state , that will return just the HTML snippet produced by the portlet.

The following code sample demonstrates the pattern of progressive enhancement where the form will submit without Javascript as well as with (To work with less capable devices .etc.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.liferay.portal.kernel.portlet.LiferayWindowState" %>

<div id="<portlet:namespace />lgoUsers">
<script type="text/javascript">
jQuery(function($){

var <portlet:namespace/>form = $('#'+'<portlet:namespace />fm');

<portlet:namespace/>form.bind("submit",function(event){
	   event.preventDefault();
	   var inputs = $("input, textarea, select", <portlet:namespace/>form);
	   var url = '<portlet:actionURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"/>' + "&" + inputs.serialize(); // see note below
	   $('#<portlet:namespace />lgoUsers').load(url);
});

});
</script>

<form
action="<portlet:actionURL/>"
method="post"
name="<portlet:namespace />fm"
id="<portlet:namespace />fm">

<input name="<portlet:namespace />sn" type="text" value="<c:out value="${sn}"/>" />
<input type="submit" name="<portlet:namespace />sm" value="Search" />
</form>
<ul>
<c:forEach items="${users}" var="user">
	<li><c:out value="${user}"/></li>
</c:forEach>
</ul>
</div>
0 Attachments
53018 Views
Average (0 Votes)
The average rating is 0.0 stars out of 5.
Comments
Threaded Replies Author Date
BUG: jQuery('#'+'<portlet:namespace />fm'); -... Fuad Efendi November 15, 2008 6:39 PM
hi, i've got problem ajax in liferay... delang j December 2, 2009 10:35 PM
What if you have multiple Ajax calls on the... Michael Poznecki January 4, 2010 12:08 PM
FYI, I've posted a demonstration portlet using... Jeff Robinson July 19, 2009 5:38 AM
is there anyway to implement something like... dennis monsewicz August 4, 2009 3:00 PM
Great sample. A little step-by-step... Ilya V. Kalujny September 14, 2009 5:48 AM
Last version of this wiki is unreadable.... Felix Ashirov November 18, 2011 4:57 AM

BUG:
jQuery('#'+'<portlet:namespace />fm');
- called before form is defined in HTML... Quick fix: move javascript block after form definition.
Posted on 11/15/08 6:39 PM.
FYI, I've posted a demonstration portlet using code at the following link:

http://www.robisoft.com/downloads/hello-jquery-portlet/
Posted on 7/19/09 5:38 AM.
is there anyway to implement something like this in PHP?
Posted on 8/4/09 3:00 PM in reply to Jeff Robinson.
Great sample. A little step-by-step instructions wont hurt tho emoticon
Posted on 9/14/09 5:48 AM in reply to Jeff Robinson.
hi,
i've got problem ajax in liferay
http://www.liferay.com/web/guest/community/forums/-/message_boards/messag­e/4285302

breadcrumb and search form appear twice, any idea to solve this?
Posted on 12/2/09 10:35 PM in reply to Fuad Efendi.
What if you have multiple Ajax calls on the same page? How do you make the URL? Would you call multiple backend beans? Or, if you called the same backend bean, how would you handle the logic in the bean?
Posted on 1/4/10 12:08 PM in reply to delang j.
Last version of this wiki is unreadable. Version 1.3 looks fine.
Posted on 11/18/11 4:57 AM.