Primefaces InputText组件JS触发change事件失败：为何无可用Behaviors？

问题描述 #

我想要通过JavaScript填充PrimeFaces的inputText字段并触发change事件，根据文档尝试用callBehavior实现，但执行后onstart的日志没打印，更新也没生效。排查发现组件的cfg对象里没有任何behaviors配置，导致callBehavior无效。

组件代码：

<p:inputText id="myInput" value="#{myBean.value}">
   <p:ajax event="change" update="@this" onstart="console.log('Change triggered')" />
</p:inputText>

我的JavaScript函数：

function myFun() {
   const theId = // 需动态获取ID
   const inputWdgt = PrimeFaces.getWidgetById(theId);
   inputWdgt.jq.val('My new value');
   inputWdgt.callBehavior('change');
}

原因分析 #

PrimeFaces的p:inputText属于基础输入组件，不会自动将<p:ajax>的行为挂载到组件widget的cfg.behaviors中。只有像p:selectOneMenu、p:calendar这类自带交互逻辑的高级组件，才会把<p:ajax>配置整合到widget的behaviors里供callBehavior调用。对于p:inputText，<p:ajax>是作为独立的事件监听器绑定到原生DOM元素上的，而非组件widget的内部配置。

解决办法 #

方法1：触发原生change事件 #

直接触发input元素的原生change事件，PrimeFaces会自动捕获该事件并执行对应的ajax逻辑：

function myFun() {
   const theId = // 动态获取的ID
   const inputWdgt = PrimeFaces.getWidgetById(theId);
   inputWdgt.jq.val('My new value');
   // 触发原生change事件，触发绑定的ajax逻辑
   inputWdgt.jq.trigger('change');
}

方法2：手动调用PrimeFaces ajax提交 #

通过组件ID找到对应的ajax行为，手动调用PrimeFaces.ab()触发请求：

function myFun() {
   const theId = // 动态获取的ID
   const inputWdgt = PrimeFaces.getWidgetById(theId);
   inputWdgt.jq.val('My new value');
   // 构建ajax行为的客户端ID：组件ID + ':0'（0是第一个ajax行为的索引，多个ajax则依次递增）
   const ajaxClientId = theId + ':0';
   PrimeFaces.ab({
       source: ajaxClientId,
       event: 'change',
       process: theId,
       update: theId // 和原ajax的update保持一致
   });
}

内容的提问来源于stack exchange，提问作者Naryxus