"A not defined" inside the <aui: script> block

Question

I am trying to extend some of the features of an existing Liferay portlet. As part of this, I would like to use Alloy UI to change the value of a field in a portlet. There is already an existing <aui:script> block where I would like to define my custom function. I went ahead and tried to use A.one('element') , but I get the error "A not defined". A.one() used elsewhere in the same .jsp file, although not in the <aui:script> block, and works as expected.

I tried to deal with this problem to no avail. One of the solutions I tried was to include a “use” statement in the element block, but it called all the functions in this block undefined when called from jsp.

What do I mean by the use statement:

 <aui:script use="aui-node,aui-base"> // ... script </aui:script> 

Here is a rough outline of what I'm trying to do:

 <aui:script> function save(){ // This is where I'm getting the 'A is not defined' error. var titleNode = A.one('input[name=title]'); if (titleNode) { // do stuff with titleNode var titleVal = titleNode.val(); var titleSubstr = titleVal.substring(0, titleSubstr.lastIndexOf('/')); titleNode.val(titleSubstr); } // other save-related code here } function otherFunction() { // some other functionality } </aui:script> 

Answer 1

<aui:script> tag outputs

 AUI().use(function(A) { } 

only if you provide dependencies through the use attribute. how

 <aui:script use="aui-base"> // your code here </aui:script> 

If you do, you will have

 <script type="text/javascript"> AUI().use('aui-base', function(A) { // your code here } </script> 

. But in this case, all the functions that you declare inside will not be global. To make them a global challenge

 Liferay.provide(window, 'functionName', function() { // function body }); 

inside <aui:script/>

Also <aui:script use="aui-base"/> better than manually calling AUI().use(function(A) {}) if the client can have IE <= 7, which does not work correctly with AUI().use() . In the case of IE 6.7, <aui:script use="aui-base> will output AUI().ready('aui-base', function(A) {}); which will work in older browsers.

Answer 2

The blog post here gives a good introduction to AUI. In particular, the following excerpt from the beginning of the message answers your direct question:

 How do you create a sandbox? Simple: AUI().use(function(A) { // Your code goes here });