在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表單添加動態元素

回答

相關問題