Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Hon Hwang
aui:input (taglib) with aui-char-counter - Char count on data load
July 26, 2011 10:39 PM
Answer

Hon Hwang

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Recent Posts

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:

1<aui:input type="textarea" id="textarea-id" rows="4" cols="50" name="user-data" label="Your Data" value="<%= userData.getUserData() %>" />
2<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.
Hitesh Methani
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 27, 2011 1:46 AM
Answer

Hitesh Methani

Rank: Regular Member

Posts: 171

Join Date: June 24, 2010

Recent Posts

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
Hon Hwang
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 27, 2011 5:31 PM
Answer

Hon Hwang

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Recent Posts

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.
Hitesh Methani
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 28, 2011 6:15 AM
Answer

Hitesh Methani

Rank: Regular Member

Posts: 171

Join Date: June 24, 2010

Recent Posts

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
Hon Hwang
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 28, 2011 6:55 PM
Answer

Hon Hwang

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Recent Posts

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.
  1. Create a new file under project/docroot/js/myjs.js
  2. Edit view.jsp to show an alert message. alert('<portlet:namespace/>hello'); to see whether portlet namespace is visible.
  3. 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" %>
  4. 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.
Hon Hwang
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 28, 2011 7:19 PM
Answer

Hon Hwang

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Recent Posts

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

1<aui:script>
2var portletNamespace = '<portlet:namespace />';
3</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:

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


Doesn't work.
Hitesh Methani
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 28, 2011 9:25 PM
Answer

Hitesh Methani

Rank: Regular Member

Posts: 171

Join Date: June 24, 2010

Recent Posts

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
Hon Hwang
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 31, 2011 8:58 PM
Answer

Hon Hwang

Rank: New Member

Posts: 17

Join Date: July 3, 2011

Recent Posts

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:
 1<script type="text/javascript">
 2    var portletNamepsace = '<portlet:namespace />';
 3    // alert('From view.jsp\n' + portletNamepsace);
 4</script>
 5
 6<aui:form id="my-aui-form">
 7    <aui:input type="textarea" label="My Data"
 8               rows="5" cols="30"
 9               id="my-aui-textarea" name="aui-text" />
10    <span id="<portlet:namespace />aui-char-count"></span> character(s) remaining.
11</aui:form>


This in conjunction with project/docroot/js/main.js:
 1AUI().ready('node', 'aui-char-counter', function(A) {
 2   
 3    // alert('From main.js\n' + portletNamepsace);
 4   
 5    var maxTextLength = 148;
 6
 7    var auiTextAreaIDWithNSpace = '#' + portletNamepsace + 'my-aui-textarea';
 8    var auiCountAreaIDWithNSpace = '#' + portletNamepsace + 'aui-char-count';
 9   
10    var auiTextAreaNode = new A.one(auiTextAreaIDWithNSpace);
11    if (auiTextAreaNode === null) {
12        alert('From main.js\n' + 'AUI Text Area node not found.');
13    }
14
15    var auiCountAreaNode = new A.one(auiCountAreaIDWithNSpace);
16    if (auiCountAreaNode === null) {
17        alert('From main.js\n' + 'AUI Count Text node not found.');
18    }
19    
20    auiCountAreaNode.set('text',
21        (maxTextLength - (auiTextAreaNode.get('text').length)));
22
23    var auiTextCounter = new A.CharCounter( {
24                             input: auiTextAreaIDWithNSpace,
25                             counter: auiCountAreaIDWithNSpace,
26                             maxLength: maxTextLength
27    });
28});


In liferay-portlet.xml, I have main.js as:
1<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.
Sayandip Ghosh
RE: aui:input (taglib) with aui-char-counter - Char count on data load
July 27, 2012 2:17 AM
Answer

Sayandip Ghosh

Rank: New Member

Posts: 11

Join Date: June 23, 2011

Recent Posts

Hey Hon!

That works like a charm! Thanks for sharing. emoticon