How to hide portlet in liferay using javascript

Question

Actually, on one page I have 2 portlets, but I want to hide the first portlet by clicking the submit button, and only the second portlet should be displayed. I used the following code:

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

But after updating the page, the portlet will appear again, and someone can help me in resolving the issue of how I can continue.

Answer 1

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

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

This will hide your portlet from the user view.

Each time your portlet is displayed, you can check the parameter that was set in the request or session (your choice) to either show the portlet or not show the portlet, for example:

 <% 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 do not want to go with the above approach, 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 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> <% } %> 

_{If you want to check out the Alloy API and some of the demos to learn Alloy UI starting with Liferay 6.1, Alloy UI is the de facto javascript library for liferay. Alloy now has an official website with many useful tutorials and examples.}

Hope this gives you enough material to continue :-)

Answer 2

You can also do the following:

If your portlet ID is: callcenter_WAR_xyzyportlet

$ ('# p_p_id_callcenter_WAR_xyzyportlet _') CSS ({display: 'neither'}) ;.