Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to submit aui:form with ajax in liferay 6.2?

    • 0
    • 2
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.30k
    Comment on it

    Basically we work with Portlet Application development and need to submit form and display the data in JPS page or need to store into database.

    In this blog I only illustrate simply submit the form data using ajax to portlet action methods and then display submitted data in JSP page.

    Please follow below steps to make aui:form with ajax submittion.

    Step 1: Create aui:form

    <aui:form id="updatePatientFormId" name="updatePatientFormId"  method="post" >
         <aui:input label="First Name" fieldParam="fname" value="" name="fname" type="text" > </aui:input>
         <aui:input label="Last Name" name="lname" value="" fieldParam="lname" type="text" />
          <aui:button type="button" cssClass="btn" onClick='<%=renderResponse.getNamespace()+"updatePatientForm();"%>'  value="Save" ></aui:button>
    </aui:form>
    

    Step 2: Create actionURL

    <portlet:actionURL var="updatePatient" name="updatePatient"/>
    

    Step 3: Create updatePatientForm() function

    <aui:script>
        Liferay.provide(window,'<portlet:namespace />updatePatientForm',function() {
            var fname=document.<portlet:namespace />updatePatientFormId.<portlet:namespace />fname.value;
            var lname=document.<portlet:namespace />updatePatientFormId.<portlet:namespace />lname.value;
    
         var A = AUI();
         var url = '<%=updatePatient.toString()%>';
         A.io.request(
         url,
         {
          //data to be sent to server
         data: {
         <portlet:namespace />fname: fname,
         <portlet:namespace />lname: lname,
    
         },
         dataType: 'text',
         on: {
         failure: function() {
          },
         success: function(obj) {
         var instance = this;
         //JSON Data coming back from Server
         var message = instance.get('responseData');
          if (message == 'true') {
    
          }
           else {
        alert(message);
               }
            }
          }
       }
      ); //END of io Request
      },
      ['aui-io']
    ); //End of Provide 
    </aui:script>
    

    Step 4: Create action methon in action class

    public void updatePatient(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException 
    {       boolean message=true;
            try {
        HttpServletRequest realRequest = PortalUtil.getHttpServletRequest(actionRequest);
        HttpServletRequest originalRequest = PortalUtil.getOriginalServletRequest(realRequest);
        String fname=ParamUtil.getString(originalRequest,actionResponse.getNamespace()+"fname");
        String lname=ParamUtil.getString(originalRequest,actionResponse.getNamespace()+"lname");
        } catch (NumberFormatException e) {
            // TODO Auto-generated catch block
            message=false;
    
        } catch (PortalException e) {
            message=false;
            // TODO Auto-generated catch block
    
        } catch (SystemException e) {
            message=false;
            // TODO Auto-generated catch block
    
        } catch (ParseException e) {
            // TODO Auto-generated catch block
            message=false;
        }
        addProcessActionSuccessMessage=false;
        HttpServletResponse httpResp = PortalUtil.getHttpServletResponse(actionResponse);
        httpResp.setContentType("text");
        httpResp.getWriter().print(message);
        httpResp.flushBuffer();
    }
    

    Thank you.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: