During my last project, we used javascript “lightbox”-style modal overlays to display and submit forms without changing the current page.
The AUI Dialog object is useful for this purpose.
In this example, we’ll display a simple form containing one textarea field in our dialog box.
First, we declare our javascript function in an <aui:script> block. The function takes the id of our arbitrary asset object as a parameter. This allows it to find the appropriate div with the html content for the form(see below). Two buttons for the dialog window are also defined here: one to validate and submit the form, the other to close the dialog.
<aui:script use="aui-dialog">
window.showAddNoteDialog= function(id) {
var dialog = new A.Dialog({
title: "Note",
bodyContent: AUI().one('#<portlet:namespace />formContentDiv_' + id),
centered: true,
modal: true,
close: true,
buttons: [
{
text: 'Submit',
handler: function() {
var inputId = '<portlet:namespace />noteField_' + id;
if (!document.getElementById(inputId).value) {
alert('Note is required.');
}
else {
AUI().one('#<portlet:namespace />noteForm_' + id).submit();
}
}
},
{
text: 'Cancel',
handler: function() {
this.close();
}
}
]
}).render();
}
</aui:script>
Next we declare the method call in a scriplet and use that in our link which will open the dialog.
<%
String assetId = "1";
String showAddNoteDialogJS=
"showAddNoteDialog('" +
assetId +
"');";
%>
<a href="javascript:void(0)" onclick="<%=showAddNoteDialogJS%>">
<liferay-ui:icon image="edit" message="Add Note" /> Add Note
</a>
Finally, we create our content div which allows us to keep the html content of the dialog box seperate from the function that opens the dialog box. We concatenate the asset ID onto the end of the html element ID of our div, form, and input field to make them unique.
<div style="display:none;">
<div id="<portlet:namespace />formContentDiv_<%= assetId %>">
<portlet:actionURL name="addNote" var="addNoteURL" />
<form id="<portlet:namespace />noteForm_<%= assetId %>" action="<%= addNoteURL %>" method="post">
<input type="hidden" name="assetId" value="<%= assetId %>"></input>
<b>Note:</b><br>
<textarea id="<portlet:namespace />noteField_<%= assetId %>" name="noteField"></textarea><br><br>
</form>
</div>
</div>
Entire JSP for convenience:
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<portlet:defineObjects />
<aui:script use="aui-dialog">
window.showAddNoteDialog= function(id) {
var dialog = new A.Dialog({
title: "Note",
bodyContent: AUI().one('#<portlet:namespace />formContentDiv_' + id),
centered: true,
modal: true,
close: true,
buttons: [
{
text: 'Submit',
handler: function() {
var inputId = '<portlet:namespace />noteField_' + id;
if (!document.getElementById(inputId).value) {
alert('Note is required.');
}
else {
AUI().one('#<portlet:namespace />noteForm_' + id).submit();
}
}
},
{
text: 'Cancel',
handler: function() {
this.close();
}
}
]
}).render();
}
</aui:script>
<%
String assetId = "1";
String showAddNoteDialogJS=
"showAddNoteDialog('" +
assetId +
"');";
%>
<a href="javascript:void(0)" onclick="<%=showAddNoteDialogJS%>">
<liferay-ui:icon image="edit" message="Add Note" /> Add Note
</a>
<div style="display:none;">
<div id="<portlet:namespace />formContentDiv_<%= assetId %>">
<portlet:actionURL name="addNote" var="addNoteURL" />
<form id="<portlet:namespace />noteForm_<%= assetId %>" action="<%= addNoteURL %>" method="post">
<input type="hidden" name="assetId" value="<%= assetId %>"></input>
<b>Note:</b><br>
<textarea id="<portlet:namespace />noteField_<%= assetId %>" name="noteField"></textarea><br><br>
</form>
</div>
</div>