<img alt="Liferay" src="http://cdn.www.liferay.com/osb-theme/images/custom/heading.png" width="146" height="36" />

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Hi all,

I am putting a character count limit on the text fields (using aui:input taglib - equivalent of HTML's textarea) and Alloy UI's aui-char-counter module.

So I got it work. However, it only starts counting when there are keyboard events.

The issue here is that I populate the text field with previous data entered by the user (data retrieved from the database). E.g., the JSP looks like:

<aui:input type="textarea" id="textarea-id" rows="4" cols="50" name="user-data" label="Your Data" value="<%= userData.getUserData() %>" />
<span id="about-yourself-charcount"></span> character(s) remaining.

where userData is a Java Bean returned by the portlet's Java code.

In this case, the data is not counted towards the character limit.

Is there a solution to this?

Thanks.

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 27, 2011 1:46 AM

Answer

Hitesh Methani

Rank: Junior Member

Posts: 94

Join Date: June 24, 2010

Hi Hon,

Can you check your script code, in input id you need to add portlet namespace as aui by default appends portlet namespace to the ids you mention.

input: '#<portlet:namespace/>textarea-id',

should be set as input instead of

input: 'textarea-id',

Thanks,
Hitesh Methani

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 27, 2011 5:31 PM

Answer

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Hi Hitesh,

It doesn't do it for me. I have to do a View Source in Web Browser and manually copy the expanded namespace string (in the format that looks like _project_WAR_project_) and add it to the input parameter in JavaScript.

How does the JavaScript be able to expand <portlet:namespace/>? Bear in mind, my JavaScript resides in main.js under project/docroot/js directory.

Still doesn't resolve my issue where the initial text from DB is not taken into account.

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 28, 2011 6:15 AM

Answer

Hitesh Methani

Rank: Junior Member

Posts: 94

Join Date: June 24, 2010

Hi Hon,

If you include your aui:autocomplete script part in a new js file and include that js in your jsp
after adding the taglib descriptor <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
script will be able to expand portlet:namespace.

This will not be possible if you include js file in liferay-portlet.xml

Thanks,
Hitesh Methani

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 28, 2011 6:55 PM

Answer

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Hitesh Methani:

If you include your aui:autocomplete script part in a new js file and include that js in your jsp
after adding the taglib descriptor <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
script will be able to expand portlet:namespace.

This will not be possible if you include js file in liferay-portlet.xml

I might be doing things wrong here, but it's not working for me.

So, this is what I've done.

Create a new file under project/docroot/js/myjs.js
Edit view.jsp to show an alert message. alert('<portlet:namespace/>hello'); to see whether portlet namespace is visible.
In myjs.js, add <script type="text/javascript" src="/js/myjs.js"></script> after <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
Deploy and run.

Nothing happens and my browser (Safari 5.1). I looked at Safari's Web Inspector -> Scripts to see what's being loaded, myjs.js does not seen to have been loaded.

I did a view source and searched for main.js, it's included as /<project>-portlet/js/main.js. So added the /<project>-portlet prefix to the src attribute of my script tag.

Still doesn't work.

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 28, 2011 7:19 PM

Answer

Rank: New Member

Posts: 17

Join Date: July 3, 2011

What I've also did is to create a Javascript variable in view.jsp with the namespace:

<aui:script>
var portletNamespace = '<portlet:namespace />';
</aui:script>

I can see portletNamespace in main.js and it's of type string (returned by Javascript's typeof).

So I tried to use this with aui-char-counter, in main.js like this:

AUI().ready('node', 'aui-char-counter', function(A) {
var aboutYourSelfCharCounter = new A.CharCounter( {
                                                   input: '#' + portletNamespace + 'my-textarea-id',
                                                   counter: '#' + portletNamespace + 'my-counter-id',
                                                   maxLength: 150
});
});

Doesn't work.

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 28, 2011 9:25 PM

Answer

Hitesh Methani

Rank: Junior Member

Posts: 94

Join Date: June 24, 2010

Hi Hon,

I tried the char-counter code with Safari browser too, it doesnt work.
Seems to be the browser compatibility issue.

Same code works for Chrome and Firefox, but unfortunately fails to work for Safari. emoticon

Thanks,
Hitesh Methani

Mark as an Answer

RE: aui:input (taglib) with aui-char-counter - Char count on data load

July 31, 2011 8:58 PM

Answer

Rank: New Member

Posts: 17

Join Date: July 3, 2011

I sort of got it to work eventually...

I replaced the use of <aui:script> with just ordinary HTML's <script> tags.

The portlet however, even after reload in Liferay, doesn't use the new code immediately; took me a few refresh of the page before the new JS kicked in. I assume a clear cache might do the trick; I suspect my browser, Safari 5.1, may be doing some caching + optimisation of JS scripts.

I also found this to be useful in helping me understand how AUI's Node is related to HTML's DOM nodes:
Liferay's Blog - Alloy UI - Working with elements and events

The above article also serves as intro. to using Alloy UI.

Here is a sample JSP (view.jsp) that should work:

This in conjunction with project/docroot/js/main.js:

AUI().ready('node', 'aui-char-counter', function(A) {

// alert('From main.js\n' + portletNamepsace);

var maxTextLength = 148;

var auiTextAreaIDWithNSpace = '#' + portletNamepsace + 'my-aui-textarea';
var auiCountAreaIDWithNSpace = '#' + portletNamepsace + 'aui-char-count';

var auiTextAreaNode = new A.one(auiTextAreaIDWithNSpace);
if (auiTextAreaNode === null) {
      alert('From main.js\n' + 'AUI Text Area node not found.');
}

var auiCountAreaNode = new A.one(auiCountAreaIDWithNSpace);
if (auiCountAreaNode === null) {
      alert('From main.js\n' + 'AUI Count Text node not found.');
}

auiCountAreaNode.set('text',
      (maxTextLength - (auiTextAreaNode.get('text').length)));

var auiTextCounter = new A.CharCounter( {
                           input: auiTextAreaIDWithNSpace,
                           counter: auiCountAreaIDWithNSpace,
                           maxLength: maxTextLength
});
});

In liferay-portlet.xml, I have main.js as:

<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>

I think the above code works because the <script> tag is parsed before main.js, since main.js is in footer. Assuming entire JavaScript is executing in a single space, what I have in <script> tag is also visible in main.js.