在liferay中为aui表单添加动态元素

我们如何使用脚本或aui脚本来添加liferay中的动态aui表单元素：script？如果这是不可能的，是否有任何替代解决方案。在liferay中为aui表单添加动态元素

我有一个aui形式，它有两个部分。点击一个按钮后，我想通过javascript动态添加新的部分。我尝试使用document.createElement（），但通过使用它，我们将只能创建HTML DOM元素。我想创建AUI元素，如AUI：输入，AUI：选择等

这是我的形式是如何构成的：

enter image description here

假设我在第二部分中的按钮。当我点击它时，我想添加一个aui：fieldset元素作为孩子的aui：form。

来源

2014-03-13 Kiran Kulkarni

你可以在你的表单中隐藏2个div（分别有你的字段），并根据通过javascript的按钮点击来显示它们，这样做是行不通的吗？ –

我们将只能创建HTML DOM元素。我想创建AUI元素，如AUI：输入，AUI：选择等

请理解aui:input，aui:select等被JSP标签意味着它们是服务器端和容器最终呈现为HTML元素，那就是你在浏览器中看到的内容。它只是那些元素呈现一些<div> s & <span> s（它们是HTML元素！）并且有它们自己的CSS类。

因此，如果您想要创建另一个表单元素，则必须单击按钮，而不必使用document.createElement或document.innerHTML。 Javascript与服务器端无关，因此它不能生成或呈现aui标签，但您可以创建HTML元素并将其添加到与aui标签类似的表单中。

下面是一些基本的教程，让你开始用合金UI的javascript：

Working with Elements and Events，您可以向下滚动到Manipulating elements标题。
Alloy UI - working with Nodes
Alloy UI Form builder只适用于Liferay 6.2。

做事

添加地址和PHONENUMBERS在用户和组织模块（控制面板 → 组织 → 编辑 → 识别部分 → 地址）的Liferay的方式，您可以检查以下JSP：

编辑_{（根据OP的评论）}

Tutorial on Liferay Auto-fields。
Source code本教程。

在自动领域一个简短的教程由LiferaySavvy以上链接:-) _{启发按计算器的政策和方便用户}

的解释给出代码注释。

Javascript代码来创建动态的领域：

<aui:script use="liferay-auto-fields"> 
new Liferay.AutoFields(
    { 
     contentBox: '#phone-fields', // this is the container within which the fields would be added dynamically 
     fieldIndexes: '<portlet:namespace />phonesIndexes' // this is the field which will store the values of the 
    } 
).render(); 
</aui:script>

JSP或HTML代码用JavaScript来的工作：

<aui:form action="<%=editArticleActionURL%>" method="post" name="LiferayAutoFieldForm"> 
    <div id="phone-fields"> 
     <div class="lfr-form-row lfr-form-row-inline"> 
      <div class="row-fields"> 
       <!-- 
        Notice the zero at the end of the name & id of the input element "phoneNumber0". 
        When you add dynamic fields this would be incremented. 
       --> 
       <aui:input fieldParam='phoneNumber0' id='phoneNumber0' name="phoneNumber0" label="Phone Number" /> 
       <aui:select id="phoneTypeId0" name="phoneTypeId0" label="Type"> 
        <aui:option value="11006" label="Business"></aui:option> 
        <aui:option value="11007" label="Business Fax"></aui:option> 
        <aui:option value="11008" label="Mobile Phone"></aui:option> 
        <aui:option value="11009" label="Other"></aui:option> 
        <aui:option value="11011" label="Personal"></aui:option> 
       </aui:select> 
      </div> 
     </div> 
    </div> 
    .... <!-- other input fields and submit buttons etc --> 
</aui:form>

代码在我们的控制器获取动态元素的值：

String phonesIndexesString = actionRequest.getParameter("phonesIndexes"); // do you remember: fieldIndexes: '<portlet:namespace />phonesIndexes'? :-) 
int[] phonesIndexes = StringUtil.split(phonesIndexesString, 0); 

for (int phonesIndex : phonesIndexes) { 
    String number = ParamUtil.getString(actionRequest, "phoneNumber" + phonesIndex); 
    int typeId = ParamUtil.getInteger(actionRequest, "phoneTypeId" + phonesIndex); 
}

希望这会有所帮助。

来源

2014-03-14 09:59:48

感谢Prakash指出。我会尝试使用自动字段 –

对于其他尝试实现相同任务的人，我遵循本教程来创建动态表单：liferaysavvy.com/2013/10/liferay-auto-fields.html –

看看aui:auto-fields标签库。让我们看看在用户帐户的电话管理内的一个例子。

来源

2014-03-14 08:12:14

谢谢丹妮尔。我会尝试使用自动字段并更新 –

是否真的有一个taglib作为自动领域，你能指出使用这样一个taglib的liferay代码吗？ –

对于其他人试图完成相同的任务，我遵循本教程创建动态表单： http://www.liferaysavvy.com/2013/10/liferay-auto-fields.html –

在liferay中为aui表单添加动态元素

回答

相关问题