In this post I am submitting a form by using aui-modal property.
In my jsp I am having one form and on click it will call a function and that function will either submit form if user submit and cancel submit form if it is cancel by the user.
I m writing here only form not its contents, my main intention is to describe the confirmation pop up.
my jsp
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<%
String valueExpandStr = "null";
PortletURL updateUserPassword = renderResponse.createActionURL();
updateUserPassword.setParameter(ActionRequest.ACTION_NAME, RegisterConstants.UPDATE_USER_PASSWORD);
%>
<aui:form name="fm" method="POST" action="<%=updateUserPassword.toString()%>" >
<%-- put html content inside here of your form --%>
<aui:button value="Save" key="save" onClick="javascript:showAddNoteDialog();"/>
</aui:form>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>
<script>
function showAddNoteDialog(){
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal(
{
bodyContent: '<label for="feedback/suggestions" ><liferay-ui:message key="sureToEditProfileInformation"/></label>',
centered: true,
headerContent: '<h3><label for="formsofinteraction"><liferay-ui:message key="confirmationBox"/></label></h3>',
modal: true,
render: '#modal',
width: 500
}
).render();
modal.addToolbar(
[
{
label: '<liferay-ui:message key="Cancel"/>',
on: {
click: function() {
modal.hide();
}
}
},
{
label: '<liferay-ui:message key="Submit"/>',
on: {
click: function() {
modal.hide();
document.getElementById("<portlet:namespace/>fm").submit();
}
}
},
]
);
}
);
}
</script>
Here you can observe, first button is cancel button which will not does any thing and just hide the pop up and submit button will submit our form.
here I created one div of id modal, it is compulsory to render our pop up.
In my jsp I am having one form and on click it will call a function and that function will either submit form if user submit and cancel submit form if it is cancel by the user.
I m writing here only form not its contents, my main intention is to describe the confirmation pop up.
my jsp
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<%
String valueExpandStr = "null";
PortletURL updateUserPassword = renderResponse.createActionURL();
updateUserPassword.setParameter(ActionRequest.ACTION_NAME, RegisterConstants.UPDATE_USER_PASSWORD);
%>
<aui:form name="fm" method="POST" action="<%=updateUserPassword.toString()%>" >
<%-- put html content inside here of your form --%>
<aui:button value="Save" key="save" onClick="javascript:showAddNoteDialog();"/>
</aui:form>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>
<script>
function showAddNoteDialog(){
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal(
{
bodyContent: '<label for="feedback/suggestions" ><liferay-ui:message key="sureToEditProfileInformation"/></label>',
centered: true,
headerContent: '<h3><label for="formsofinteraction"><liferay-ui:message key="confirmationBox"/></label></h3>',
modal: true,
render: '#modal',
width: 500
}
).render();
modal.addToolbar(
[
{
label: '<liferay-ui:message key="Cancel"/>',
on: {
click: function() {
modal.hide();
}
}
},
{
label: '<liferay-ui:message key="Submit"/>',
on: {
click: function() {
modal.hide();
document.getElementById("<portlet:namespace/>fm").submit();
}
}
},
]
);
}
);
}
</script>
Here you can observe, first button is cancel button which will not does any thing and just hide the pop up and submit button will submit our form.
here I created one div of id modal, it is compulsory to render our pop up.
