0

我试图在 Liferay 中动态创建文本框，如此处所示。

我可以用<input>tag 做，但不能用<aui:input>，为什么？

<%@ 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>
4

1 回答 1

3

<aui:input>是jsp代码，不是HTML。你不能使用

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

因为您的浏览器不知道如何处理它。

请记住，jQuery 是纯粹的 javascript，而 AUI 结合了 javascript、组件（例如 DOM 类、CSS）和 java JSP 支持。和<aui:input>相关标签在页面呈现（服务器端）并产生它们的输出时被处理。您必须要么在动态呈现的 HTML 中使用该输出，要么将内容保存在临时变量中，例如通过使用<liferay-util:buffer>标签。小心：为了从 javascript 使用这个结果，你必须正确地转义结果

于 2013-06-04T09:04:30.027 回答