java - 将值从弹出 portlet 发送回父 portlet

Question

1. 父 portlet 有一个表单，我填写但尚未提交。
2. 然后，我从这个父 portlet 中单击一个链接来打开一个弹出 portlet，在弹出窗口中填写表单并提交值。
3. 该值现在应该在父 portlet 中可用。但如果不刷新，该值在父 portlet 中将不可用。
4. 因此，我编写了使用 ajax 在弹出提交上刷新父 portlet 的逻辑，并且该值在父 portlet 中变得可用。
5. 但问题是父 portlet 中的表单被清除，我必须再次重新填写表单。

那么如何保留尚未提交的父表单值呢？或者有没有办法使弹出的 portlet 值在父 portlet 中可用而无需刷新父 portlet？

父 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>

然后我就得到了弹出的 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>

Answer 1

我认为你可以这样做:

1. 您可以以 JSON 格式从服务器传递数据。
2. 在 success 中获取该内容方法
3. 将数据传输到父 JavaScript 函数
4. 运行父级中的方法以更新 <aui:select> .

弹出窗口成功方法中的一些示例代码:

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');                                        
}

在父级中:

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

可能还有其他方法，但这是我现在能想到的。

<小时/>

建议:

您可以在一个 <aui:script></aui:script> 中拥有所有功能而不是多次这样做。

希望这有帮助。