Wednesday, 29 October 2014

confirmation box in liferay

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.


No comments:

Post a Comment