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.

Answer 1

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:

1. add an element in your JSP, but make it hidden

   <aui:select id="conditions" style="display: none;"><aui:select>

2. 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

3. 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.

Answer 2

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

If you understand this, you resolve.