How to get client side portlet id in liferay?

Question

I use AlloyUI in my liferay portlet.

I want to use id <input> in javascript. The problem is that the identifier of the elements changes on the client side.

For instance:
If I set the identifier <input> to "username", it will be changed to _hospital_WAR_hospitalportlet_userName ie _hospital_WAR_hospitalportlet_ added to the identifier, where Hospital is the name of my portlet.

How can I get the client side identifier so that I can use it in jquery?

Answer 1

The _hospital_WAR_hospitalportlet_ line added to the Id for <input> is nothing more than a portlet namespace.

This is only added to your <input> name and Id attribute if you use the <aui:input> , and the name and Id attributes do not change if you just use plain-vanilla html <input> .

But since it is recommended to use <aui:input> , you can do the following to get the portlet namespace in your javascript code:

• If you use javascripts inside JSP, that is, use inside <script> .. </script> or <aui:script> .. </aui:script> , then you can use <portlet:namespace /> or <%= renderResponse.getNamespace() %> to get the _hospital_WAR_hospitalportlet_ line inside your javascript, something like.

   jQuery("#<portlet:namespace />username").val(); // Or jQuery("#<%= renderResponse.getNamespace() %>username").val(); 

• But if you use a *.js file, then I suggest passing the namespace as an argument to the javascript function in the js file:

   function changeValues(portletNamespace) { // this function is in a js file jQuery("#" + portletNamespace + "username").val("Lets change"); } 

  calling this function from JSP:

   <input type="button" onClick="changeValues('<portlet:namespace />')" /> 

Hope this helps. I don't know if there is a way to get namespace or portletId directly through some javascript function defined by Liferay. If you get something like this, you can post it here and it will be very helpful.

Answer 2

Try the following:

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