How to close a popup window in Liferay?

Question

I load the WebContent edit portlet on a Popup window using the following code:

<liferay-ui:icon
    image="edit"
    label="true"
    message="news-edit-url"
    url="${oneNews.newsEditUrl}"
    />

editUrl:

taglibEditURL = "javascript:Liferay.Util.openWindow({dialog: {width: 960}," + 
    "id: '" + renderResponse.getNamespace() + "'," +
    "title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "'," +
    "uri:'" + HtmlUtil.escapeURL(editPortletURLString) + "'});";

When the content is saved or published, the portlet is loaded on the popup window. I want the popup window to close and the portlet with the editURL link to refresh.

Any help regarding this...

Answer 1

Here is the code to close the pop-up, this should be present in the parent page which opens the pop-up:

Liferay version 6.1

Liferay.provide(
        window,
        '<portlet:namespace />closePopup',
        function(popupIdToClose) {

            var A = AUI();

            A.DialogManager.closeByChild('#' + popupIdToClose);
        },
        ['aui-base','aui-dialog','aui-dialog-iframe']
    );

Liferay version 6.2

Liferay.provide(
    window,
    '<portlet:namespace/>closePopup',
        function(popupIdToClose) {

            var popupDialog = Liferay.Util.Window.getById(popupIdToClose);

            popupDialog.destroy();
        },
        ['liferay-util-window']
    );

Here is the code to refresh the portlet which opened the pop-up. This should be present in the parent page which opens the pop-up:

Liferay.provide(
        window,
        '<portlet:namespace />refreshPortlet',
        function() {

            <%-- refreshing the portlet [Liferay.Util.getOpener().] --%>
            var curPortletBoundaryId = '#p_p_id<portlet:namespace />';

            Liferay.Portlet.refresh(curPortletBoundaryId);
        },
        ['aui-dialog','aui-dialog-iframe']
    );

It is up to you how to call the closePopup & refreshPortlet functions. One way is you can let the pop-up refresh and call the closePopup function from the pop-up itself only when the request is successfully processed and then call the refreshPortlet function also from the pop-up.

Here is a code-snippet which would help you to call parent-page functions from the pop-up:

Liferay.Util.getOpener().<portlet:namespace />closePopup(popupIdToClose);
Liferay.Util.getOpener().<portlet:namespace />refreshPortlet();

The popupIdToClose is the same id which is used when opening the pop-up as shown:

taglibEditURL = "javascript:"
                +   Liferay.Util.openWindow({"
                +       "dialog: {width: 960},"
                +       "id: '" + renderResponse.getNamespace() + "'," // This is the "popupIdToClose"
                +       "title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "',"
                +       "uri:'" + HtmlUtil.escapeURL(editPortletURLString)
                +       "'}"
                +   ");";

Hope this helps.

Answer 2

AUI taglib solution for 6.2 version. No additional JS required.

<aui:button cssClass="close-panel" type="cancel" value="close" />

Important part is cssClass="close-panel".