Question

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

我可以使用<input>代码但不能使用<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>

Answer 1

<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中使用这个结果，你必须正确地逃避结果

Alloy.UI无法使用JQuery.html

1 个答案: