Alfresco custom-selectone.ftl

Question

Я хочу сделать свой заказ selectone.ftl. Я иду шаг за шагом, поэтому я создал customselectone.ftl с постоянными значениями для возврата из javascript в ftl-элемент управления. Итак, у меня есть newCodes [c1, c2, c3], ведь я хочу быть в списке избранных.

Когда я запускаю Alfresco Share и запускаю свое действие, я получаю диалог с пустым selectone, а результат alert (document.getElementById ("$ {fieldHtmlId}")) равен null. Почему это? Я использую версию Alfresco 5.0.d. Буду признателен за любую помощь. Благодарю.

customselectone.ftl

<#assign controlId = fieldHtmlId + "-cntrl"> 
<script type="text/javascript">//<![CDATA[ 
var newCodes = ["c1", "c3", "c4"]; 
alert(document.getElementById("${fieldHtmlId}")); 
alert(document.getElementById("${controlId}")); 
var sel = document.getElementById(${fieldHtmlId}); 
alert(sel); 
alert(newCodes); 
for(var i = 0; i < newCodes.length; i++) { 
alert('usao u petlju'); 
     var opt = document.createElement('option'); 
     opt.innerHTML = newCodes[i]; 
     opt.value = newCodes[i]; 
     sel.appendChild(opt); 
    } 

//]]></script> 


<div id="${controlId}" class="form-field"> 
<labelfor="${fieldHtmlId}">${msg("form.control.myoptions.label")}:<#if  field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label> 

<select id="${fieldHtmlId}" name="prop_${field.name}" tabindex="0" 

    <#if field.description??>title="${field.description}"</#if> 

    <#if field.control.params.size??>size="${field.control.params.size}"</#if> 

    <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if> 

    <#if field.control.params.style??>style="${field.control.params.style}"</#if>> 

</select> 
<@formLib.renderFieldHelp field=field /> 
</div> 

доля-конфигурации-custom.xml

<!-- Custom Action Forms --> 
<config evaluator="string-compare" condition="changeDmsMonaType"> 
    <forms> 
     <form> 
      <field-visibility> 
       <show id="docClass" /> 
      </field-visibility> 
      <appearance> 
       <field id="docClass" label-id="actions.dmsmona.changeDmsMonaType.docClass"> 
        <control template="/org/alfresco/components/form/controls/customselectone.ftl"> 
         </control> 
       </field> 
      </appearance> 
     </form> 
    </forms> 
</config> 

Answer 1

alert(document.getElementById("${fieldHtmlId}")) выполняется до того, как HTML-полностью оказаны. Таким образом, <select id="${fieldHtmlId}"> не существует в дереве DOM при вызове getElementById("${fieldHtmlId}").

Я думаю, что это одна из причин, почему ваш код не работает.

Почему вы используете JavaScript в любом случае? Вы можете сделать это в простом Freemarker:

<#assign controlId = fieldHtmlId + "-cntrl"> 
<#assign newCodes = ['c1', 'c2', 'c3']> 

<div id="${controlId}" class="form-field"> 
    <labelfor="${fieldHtmlId}">${msg("form.control.myoptions.label")}:<#if  field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label> 

<select id="${fieldHtmlId}" name="prop_${field.name}" tabindex="0" 

    <#if field.description??>title="${field.description}"</#if> 

    <#if field.control.params.size??>size="${field.control.params.size}"</#if> 

    <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if> 

    <#if field.control.params.style??>style="${field.control.params.style}"</#if>> 
    <#list newCodes as optionItem> 
     <option value="${optionItem?html}>${optionItem?html}</option> 
    </#list> 
</select> 
<@formLib.renderFieldHelp field=field /> 
</div> 

Редактировать

Если вы хотите использовать JavaScript (как указано в вашем комментарии), вы можете использовать либо window.onload или DOMContentLoaded события.

onload имеет недостаток, заключающийся в том, что он выполняет скрипты только после того, как весь документ, включая все внешние ресурсы, был загружен. Это может привести к задержкам, которые воспринимаются пользователем слишком долго, пока страница полностью не работает.

DOMContentLoaded имеет проблемы совместимости в некоторых браузерах (IE9 и более старый afaik).

Для решения, которое вы можете использовать, например. ContentLoaded.js by Diego Perini.

Ваш результат может выглядеть следующим образом:

<#assign controlId = fieldHtmlId + "-cntrl"> 
<script type="text/javascript" src="http://javascript.nwbox.com/ContentLoaded/contentloaded.js"></script> 
<script type="text/javascript">//<![CDATA[ 
function initializeDynamicContent() { 
    var newCodes = ["c1", "c3", "c4"]; 
    alert(document.getElementById("${fieldHtmlId}")); 
    alert(document.getElementById("${controlId}")); 
    var sel = document.getElementById(${fieldHtmlId}); 
    alert(sel); 
    alert(newCodes); 
    for(var i = 0; i < newCodes.length; i++) { 
     alert('usao u petlju'); 
     var opt = document.createElement('option'); 
     opt.innerHTML = newCodes[i]; 
     opt.value = newCodes[i]; 
     sel.appendChild(opt); 
    } 
} 
contentLoaded(window, initializeDynamicContent); 
//]]></script> 

<div id="${controlId}" class="form-field"> 
    <labelfor="${fieldHtmlId}">${msg("form.control.myoptions.label")}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label> 
    <select id="${fieldHtmlId}" name="prop_${field.name}" tabindex="0" 
     <#if field.description??>title="${field.description}"</#if> 
     <#if field.control.params.size??>size="${field.control.params.size}"</#if> 
     <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if> 
     <#if field.control.params.style??>style="${field.control.params.style}"</#if>> 
    </select> 
    <@formLib.renderFieldHelp field=field /> 
</div>