How to get client side portlet-id in liferay?

Question

I'm using AlloyUI in my liferay portlet.

I want to use my <input>'s id in javascript. The problem is that the id of the elements are changed in client side.

For example:
If I set an <input>'s Id to "username" it is changed to _hospital_WAR_hospitalportlet_userName i.e. _hospital_WAR_hospitalportlet_ is appended to the Id, where Hospital is my portlet name.

How can I get client-side Id so that I can use it in jquery?

Answer 1

The string _hospital_WAR_hospitalportlet_ prepended to the Id of the <input> is nothing but the portlet-namespace.

This is only prepended to your <input>'s name & id attribute if you use <aui:input> tag and the name & id attributes are not changed if you just use plain-vanilla html <input> tag.

But as it is a good practice to use <aui:input> you can do the following to get the portlet-namespace in your javascript code:

1. If you are using javascripts inside a JSP i.e. using within <script> .. </script> or <aui:script> .. </aui:script> then you can use <portlet:namespace /> or <%= renderResponse.getNamespace() %> to get the string _hospital_WAR_hospitalportlet_ inside your javascript, something like.

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

2. But if you are using a *.js file then I suggest you pass 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 the JSP:

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

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

Answer 2

Try this:

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