1
votes
  1. The parent portlet has a form which I fill but do not submit yet.
  2. Then from this parent portlet I click a link to open a pop up portlet where I fill the the form in the pop up and submit the value.
  3. This value should now be available in the parent portlet. But without refresh the value is not available in the parent portlet.
  4. So I write the logic to refresh the parent portlet on the pop up submit using ajax and the value becomes available in the parent portlet.
  5. But the problem is the form in the parent portlet gets cleared and I have to again re-fill the form.

So how to preserve this parent form values which are yet to be submitted? Or is there a way to make the pop up portlet value available in the parent portlet without refreshing the parent portlet?

The code for parent portlet:

<aui:form action="<%= editURL %>" method="POST" name="fm">
     <aui:fieldset>
        <aui:input name="redirect" type="hidden" value="<%= redirect %>" />


         <aui:input name="name" />

         <aui:input name="acronym" />

         <aui:input name="url" />

         <aui:select  showEmptyOption="<%= true %>">

              // Want to make the values added from pop up available here

         </aui:select>

         <%
             String portletId = (String) request.getAttribute(WebKeys.PORTLET_ID);
             String portletNamespace = PortalUtil.getPortletNamespace(portletId);
         %>

         <c:set var="portletNameSpaceVal" value="<%=portletNamespace%>" />

         <liferay-portlet:renderURL 
             var="addURL" windowState="<%= LiferayWindowState.POP_UP.toString() %>"
             portletName="name">
             <liferay-portlet:param name="jspPage" value="/html/person/edit_person_popup.jsp"/>
         </liferay-portlet:renderURL>

         <c:set var="portletURL" value="<%=addURL%>" />

         <aui:a href="#" onClick="${portletNameSpaceVal}showPopup('${portletURL}')"><liferay-ui:icon image="add"/></aui:a> // this link triggers the pop up


         <aui:select label="Country" name="countryCode" showEmptyOption="<%= true %>">

              <%
                 for (Country country : countries) {
             %>

             <%
                 }
             %>

         </aui:select>




     </aui:fieldset>

     <aui:button-row>
         <aui:button type="submit" />

         <aui:button onClick="<%= viewURL %>"  type="cancel" />
     </aui:button-row>
 </aui:form>


 <aui:script>
     function <portlet:namespace />showPopup(url) {

         var url = url;

             Liferay.Util.openWindow(
                 {
                     dialog: {
                         cache: false,
                         width:800,
                         modal: true,
                         centered: true
                     },
                     id: 'popUpId',                
                     uri: url
                 }
             );
     }

 </aui:script>

 <aui:script>
     Liferay.provide(window, 'refreshPortlet', function() {
         var curPortlet = '#p_p_id<portlet:namespace/>';
         Liferay.Portlet.refresh(curPortlet);
     },
     ['aui-dialog','aui-dialog-iframe']
     );
 </aui:script>

 <aui:script>
     Liferay.provide(window, 'closePopup', function(dialogId) {
         var A = AUI();
         var dialog = Liferay.Util.Window.getById(dialogId);
         dialog.destroy();
     },
     ['liferay-util-window']
     );
 </aui:script>

Then I have the pop up portlet.

<aui:form action="<%= editURL %>" method="POST" name="fm" onSubmit="event.preventDefault();">
    <aui:fieldset>

        <aui:input name="name" />

        <aui:input name="url" />

        <aui:input name="address" />

    </aui:fieldset>

    <aui:button-row>
        <aui:button type="submit" />

        <aui:button name="cancel" value="Cancel"/>

    </aui:button-row>
</aui:form>

<aui:script use="aui-base,aui-form-validator,aui-io-request">
    AUI().use('aui-base','aui-form-validator','aui-io-request',function(A){
        var rules = {
              <portlet:namespace/>name: {
                required: true
              },

              <portlet:namespace/>url: {
                url: true
              },

              <portlet:namespace/>address: {
                required: true
              },
          };

        var fieldStrings = {
            <portlet:namespace/>name: {
                required: 'The Name field is required.'
              },

              <portlet:namespace/>address: {
                required: 'The Address field is required.'
              },
        };

        new A.FormValidator({
            boundingBox: '#<portlet:namespace/>fm',
            fieldStrings: fieldStrings,
            rules: rules,
            showAllMessages:true,
            on: {
                    validateField: function(event) {
                     },
                    validField: function(event) {
                   },
                    errorField: function(event) {
                    },
                    submitError: function(event) {
                        event.preventDefault(); //prevent form submit
                    },
                    submit: function(event) {
                        var A = AUI();
                        var url = '<%=editURL.toString()%>';

                        A.io.request(
                            url,
                            {
                                method: 'POST',
                                form: {id: '<portlet:namespace/>fm'},
                                on: {
                                    success: function() {
                                        Liferay.Util.getOpener().refreshPortlet();
                                        Liferay.Util.getOpener().closePopup('popUpId');                                        
                                    }
                                }
                            }
                       );
                   }
                }
          });
    });

</aui:script>




<aui:script use="aui-base">
    A.one('#<portlet:namespace/>cancel').on('click', function(event) {
        Liferay.Util.getOpener().closePopup('popUpId);
    });
</aui:script>
1

1 Answers

2
votes

This is what I think you can do:

  1. You can pass data from the Server in JSON format.
  2. Fetch that in success method
  3. Transfer the data to a parent javascript function
  4. run the method in the parent to update the <aui:select>.

Some sample code in the pop-up's success method:

success: function(responseData) {
    // refresh method removed
    // get the responseData as JSON or something from the server
    Liferay.Util.getOpener().updateDataFromPopUp("JSON-data-passed");
    Liferay.Util.getOpener().closePopup('popUpId');                                        
}

And in parent:

<aui:script>
     Liferay.provide(window, 'updateDataFromPopUp', function(jsonDataFromPopUp) {
         // do something with the data here
        }
     );
 </aui:script>

There may be other ways but this is what I could think of right now.


A Suggestion:

You can have all the functions in one <aui:script></aui:script> instead of having this multiple times.

Hope this helps.