Dynamic forms AUI Liferay

Question

I am doing a portlet in Liferay with a form like this:

<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
    <aui:select  name="attribute" style="float: left;">
        <c:forEach var="attr" items="${fields}">
            <aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
        </c:forEach>                                
    </aui:select>
    <aui:input type='button' value="Add Condition"  name='addCondition' onClick="addCondition();" %>'></aui:input>
    <div id='conditions'></div>
</form>

I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:

var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');

and

document.createElement('<aui:select>');

I tried too with AUI script doing:

var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');

But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.

Thanks.

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

As @Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.

To dynamically load the contents of the select box you would want to follow these steps:

add an element in your JSP, but make it hidden

<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.

document.getElementById('<portlet:namespace/>conditions').style.display = 'block';

For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 02 '13 at 16:09

Barryrowe

1,313
10
16

1

I guess you need to use document.getElementById('conditions').style.display .. correct me if I am wrong – Kiran Kulkarni Mar 12 '14 at 09:59
I believe you are correct Kiran. Thanks I'll update to reflect that oversight. The rendered elements from aui tags definitely prepend the portlet namespace to the id and name attributes. Good catch. – Barryrowe Mar 12 '14 at 14:34
It's not a custom submit that gather only aui element, it's the portlet that filter submitted content to the one prefixed with it's – Jonatan Cloutier Jun 23 '14 at 19:35

score 1 · Answer 2 · answered Oct 02 '13 at 13:31

1

<aui:select> is a JSP taglib, not the final HTML markup.

If you understand this, you resolve.

answered Oct 02 '13 at 13:31

Daniele Baggio

2,157
1
14
21

Dynamic forms AUI Liferay

2 Answers2