Question

父portlet有一个我填写但尚未提交的表单。
然后从这个父portlet中单击一个链接打开一个弹出的portlet，我在弹出窗口中填写表单并提交值。
此值现在应在父portlet中可用。但是没有刷新，父portlet中就没有该值。
因此，我使用ajax编写逻辑以刷新弹出提交上的父portlet，并且该值在父portlet中可用。
但问题是父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

我认为你可以这样做：

您可以以JSON格式从服务器传递数据。
在success方法
将数据传输到父javascript函数
在父级中运行方法以更新<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>中，而不是多次使用。

希望这有帮助。

将值从弹出portlet发送回父portlet

1 个答案: