How to get client side portlet-id in liferay?

alloy-ui, liferay, liferay-6

Solution

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:

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();

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.

Problem

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?

Original source