Alloy.UI not working with JQuery.html

Question

I was trying to dynamically create textbox in Liferay as shown here.

I am able to do it with <input> tag but not with <aui:input>, why?

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %> 

<html>

<portlet:defineObjects />

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

        if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

        alert();

        newTextBoxDiv.html('<aui:input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" />');

        alert(newTextBoxDiv.html);

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
    });

    $("#removeButton").click(function () {
        if(counter==1){
            alert("No more textbox to remove");
            return false;
        }   

        counter--;

        $("#TextBoxDiv" + counter).remove();
    });

    $("#getButtonValue").click(function () {

        var msg = '';

        for(i=1; i<counter; i++) {
            msg += "\n Textbox #" + i + " : " + $('#<portlet:namespace/>textbox' + i).val();
        }

        alert(msg);
    });
  });
</script>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <aui:input type="text" label="TextBox #1" id="textbox1" name="textbox1"></aui:input>
    </div>
</div>

<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

Not related to your question but helpful: you should never include ``, ``, ``, `` ... tags in portlet's jsp since portlets only generate HTML fragments not the whole html page. — Prakash K, Jun 04 '13 at 13:31

score 3 · Answer 1 · answered Jun 04 '13 at 09:04

<aui:input> is jsp code, not HTML. You can't use

newTextBoxDiv.html('<aui:input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" />');

because your browser will not know what to do with it.

Keep in mind that jQuery is purely javascript, while AUI combines javascript, components (e.g. DOM classes, CSS) and java JSP support. The <aui:input> and related tags are processed when the page renders (server side) and produce their output. You'd have to either use that output in your dynamically rendered HTML or save the content in a temporary variable, e.g. through the use of the <liferay-util:buffer> tag. Careful: In order to use this result from javascript, you'll have to escape the result properly

Ok got it , would try some other way – user2304995 Jun 04 '13 at 09:19 — user2304995, Jun 04 '13 at 09:19

Alloy.UI not working with JQuery.html

1 Answers1