How to hide portlet in liferay by using javascript

Question

Actually on a single page I have 2 portlet but I want to hide the first portlet by clicking the submit button and only the second portlet should be visible I used the following code:

document.getElementById("portlet-id").style.visibility='none'

But after refreshing the page, again portlet is visible can anyone provide me the solution as to how I can proceed.

Answer 1

You can set the visibility of the portlet to false in the JSP by using the following code:

<%
renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.FALSE);
%>

This would hide your portlet from user's view.

Everytime your portlet is rendered you can check a parameter which was set in the request or session (your choice) to either show the portlet or not show the portlet, like:

<%
String paramFromRequestToHide = renderRequest.getParameter("hidePortlet");
// can also fetch from session: portletSession.getAttribute("hidePortlet");

if (paramFromRequestToHide .equals("YES")) { // you can use your favorite data-type
    renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.FALSE);
} else {
    renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.TRUE);
}
%>

---

Another method:

---

If you don't want to go with the above approach then you can combine your javascript approach with the parameter approach as follows:

<%
String paramFromRequestToHide = renderRequest.getParameter("hidePortlet");

if (paramFromRequestToHide .equals("YES")) {
%>

<aui:script>
    Liferay.Portlet.ready(

    /*
    This function gets loaded after each and every portlet on the page.

    portletId: the current portlet's id
    node: the Alloy Node object of the current portlet
    */
        function(portletId, node) {
            document.getElementById(portletId).style.display = 'none';
            // or alternatively using pure Alloy UI
            // node.hide();
        }
    );
</aui:script>

<%
} else {
%>

<aui:script>
    Liferay.Portlet.ready(
        function(portletId, node) {
            document.getElementById(portletId).style.display = 'block';
            // or alternatively using pure Alloy UI
            // node.show();
        }
    );
</aui:script>

<%
}
%>

_{In case you want to check-out Alloy UI API and some of the demos to learn Alloy UI since starting from Liferay 6.1 Alloy UI is the de-facto javascript library for liferay. Now Alloy UI has an official web-site with many helpful tutorials and examples.}

Hope this gives you ample material to proceed :-)

Answer 2

You also can do like this :

If your portlet id is : callcenter_WAR_xyzyportlet

$('#p_p_id_callcenter_WAR_xyzyportlet_').css({display:'none'});