Liferay AutoFields生成的AUI输入框localized属性失效问题
Liferay AutoFields克隆的本地化输入框无法切换语言的解决方案
我之前碰到过完全一样的问题——用AutoFields动态生成带localized="true"的AUI输入框时,克隆出来的输入框语言切换按钮点击完全没反应。本质原因是本地化输入框的语言切换事件只在页面首次加载时绑定,克隆出来的DOM元素没触发这些初始化逻辑,下面是具体的解决办法:
核心思路
在AutoFields的clone事件回调里,手动触发新生成本地化输入框的初始化流程,重新绑定语言切换的交互事件。我们可以借助Liferay内置的Liferay.Form.Localization模块来完成这个操作。
修改后的完整代码
HTML结构(保持原有逻辑不变)
<div id="fields-wraper" class="lfr-form-row lfr-form-row-inline field-wrapper clearfix col-md-12 col-sm-12 col-xs-12"> <div class="row-fields"> <aui:row> <aui:column cssClass="field-wrapper clearfix col-md-6 col-sm-6 col-xs-6"> <aui:input fieldParam='filtreTitre0' id='filtreTitre0' name="filtreTitre0" label="value" type="text" localized="true" /> </aui:column> <aui:column cssClass="field-wrapper clearfix col-md-6 col-sm-6 col-xs-6"> <aui:input fieldParam='filtreCode0' id='filtreCode0' name="filtreCode0" label="ma.alten.cpm.code" type="text" /> <p style="display:none;">code already exist</p> </aui:column> </aui:row> </div> </div>
JavaScript脚本(添加本地化初始化逻辑)
<aui:script use="liferay-auto-fields, liferay-form-localization"> new Liferay.AutoFields( { contentBox: '#fields-wraper', fieldIndexes: '<portlet:namespace />rowIndexes', on: { 'init':function(event) { }, 'clone': function(event) { AUI().use('aui-form-validator', function(A) { var namespace = '<portlet:namespace />'; var addedElementCode = A.one('#' + namespace + 'filtreCode'+event.guid); var addedElementTitle = A.one('#' + namespace + 'filtreTitre'+event.guid); // 保留原有清空输入框、隐藏提示的逻辑 addedElementTitle.set('value', ""); addedElementCode.get('parentNode').get('parentNode').one('p').setStyle('display','none'); // 关键:初始化克隆出的本地化输入框的语言切换功能 var localizationContainer = addedElementTitle.ancestor('.localized-input'); if (localizationContainer) { Liferay.Form.Localization.init(localizationContainer); } }); }, 'delete': function(event) { } } } ).render(); </aui:script>
关键代码说明
- 引入必要模块:在
<aui:script>的use属性里添加liferay-form-localization,确保能调用Liferay的本地化初始化方法。 - 定位本地化容器:通过
ancestor('.localized-input')找到新生成输入框的父容器,这个容器包含了语言切换按钮和多语言输入框的完整结构。 - 重新绑定事件:调用
Liferay.Form.Localization.init(localizationContainer),为克隆元素重新初始化语言切换的交互逻辑,让按钮恢复点击功能。
这样修改后,动态生成的本地化输入框就能和初始输入框一样正常切换语言标识了。
内容的提问来源于stack exchange,提问作者Ghita




