Não consigo criar function OnChange via script de campo input gerado pelo WES

Question

Estou tentando aplicar um Javascript numa tela do Wes, fazendo um AddEventListener on Change pra que sempre que o campo mudar, eu fazer uma operação específica, porém o campo é um input que vem do Select, e simplesmente não funciona.

 

Campo gerado pelo WES ao selecionar um registro no Select:

<input type="hidden" name="ctl00$Main$WIDGETID_636046302350290715$formView$PageControl$Guias$Guias$BENEFICIARIO$ctl01" id="ctl00_Main_WIDGETID_636046302350290715_formView_PageControl_Guias_Guias_BENEFICIARIO_ctl01" value="{&quot;id&quot;:&quot;21486&quot;,&quot;text&quot;:&quot;00001000001200 - SIMONE ARISA HOKASONO - 00001000001200&quot;}">

 

Minhas tentativas: 

document.getElementById('ctl00_Main_WIDGETID_636046302350290715_formView_PageControl_Guias_Guias_BENEFICIARIO_ctl01').addEventListener("change", function() {
console.log("teste")
});

$('#ctl00_Main_WIDGETID_636046302350290715_formView_PageControl_Guias_Guias_BENEFICIARIO_ctl01').on('change', function () {
        console.log("teste");
    });

OBS: Se eu tento usar a mesma lógica em um input Text comum, funciona normalmente.

Answer 1

Os eventos tal como o onchange só são acionados quando o usuário executa o evento no navegador, como o usuário não consegue interagir com o input hidden ou um input escondido por CSS esse evento não é disparado.

Sendo assim o evento de change deve ser executado manualmente:

$('#hidden-field').change(function(){
          alert('valor alterado');
})

//alguma condição para disparar o gatilho do evento
$('#hidden-field').trigger('change');

 

Obs.; muito cuidado a utilização de id's gerados pelo webforms tal como 

ctl00_Main_WIDGETID_636046302350290715_formView_PageControl_Guias_Guias_BENEFICIARIO_ctl01, em algum momento isso poderá mudar conforme a ordem dos widgets.

Comments

uma das formas de você pegar o campo hidden é através do data-field:

$('[data-field="NOMEDOCAMPO"]')