JSF onchange event

Question

我有一个JSF应用程序，其中有一个类似这样的组合框。

<script type="text/javascript" defer="defer">
  <!--//--><![CDATA[//><!--
    helpKey = 'APPLICATION_EDIT_DATASOURCE';
    function reapplyStyles() {}
    function selectT(data){
        if(data.status == "begin"){
            $('editForm:selectTypeButton').click();    
        }
    }
   //--><!]]>
</script>
  <h:form id="editForm">
    <h:inputHidden id="id" value="#{applicationObject.objectId}"/>
    <h:inputHidden id="type" value="#{applicationObject.object.type}"/>
    <h:inputHidden id="selectedDSForApp" value="#{applicationObject.selectedDataSourceId}"/>
    <ui:param name="activityDataSource" value="#{applicationObject.selectedDataSourceBean}"/>
    <a4j:outputPanel id="activityDataSourceRulesPanel">
    <h:panelGrid columns="2" columnClasses="padded" rowClasses="padded">
      <h:outputText value="#{msgs.transformation_rule}"/>
      <h:panelGroup>
          <h:selectOneMenu id="dsTransformationRule" value="#{activityDataSource.selectedTransformationRule}"
                           disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
                           readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
            <f:selectItems value="#{activityDataSource.transformationRules}"/>
          </h:selectOneMenu>
          <ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageRules')}" >
              <input type="button" value="#{msgs.button_ellipsis}" class="ruleEditorBtn"
                     onclick="SailPoint.Rule.Editor.edit($('editForm:dsTransformationRule').value,
                             'ActivityTransformer',
                             $('editForm:refreshActivityDataSourceRulesButton'))" />
          </ui:fragment>
      </h:panelGroup>
      <h:outputText value="#{msgs.correlation_rule}"/>
      <h:panelGroup>
          <h:selectOneMenu id="dsCorrelationRule" value="#{activityDataSource.selectedCorrelationRule}"
                           disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
                           readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
            <f:selectItems value="#{activityDataSource.correlationRules}"/>
          </h:selectOneMenu>
          <ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageRules')}" >
              <input type="button" value="#{msgs.button_ellipsis}" class="ruleEditorBtn"
                     onclick="SailPoint.Rule.Editor.edit($('editForm:dsCorrelationRule').value,
                             'ActivityCorrelation',
                             $('editForm:refreshActivityDataSourceRulesButton'))" />
          </ui:fragment>
      </h:panelGroup>
      <h:outputText value="#{msgs.activity_data_src_type}"/>
      <h:panelGroup>
        <a4j:outputPanel id="collectorSettings">
          <h:selectOneMenu id="collectorType"
                           value="#{activityDataSource.object.type}"
                           rendered="#{empty activityDataSource.object.id}"
                           disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
                           readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
                          <!--  onchange="$('editForm:selectTypeButton').click();"> -->
             <f:ajax event="change" 
                    onevent="selectT"
                    execute="@this dsTransformationRule dsCorrelationRule"
                    render="dsTransformationRule dsCorrelationRule"
                    listener="#{activityDataSource.handleCollectorTypeChange}" />
            <f:selectItem itemValue="" itemLabel="#{msgs.select_collector_type}"/>
            <f:selectItems value="#{activityDataSource.collectorTypes}"/>
          </h:selectOneMenu>
          <h:selectOneMenu id="fixedCollectorType" value="#{empty activityDataSource.object.type ? 'None' : activityDataSource.object.type}"
                           rendered="#{not empty activityDataSource.object.id}"
                           disabled="true"
                           readonly="true">
            <f:selectItem itemValue="#{empty activityDataSource.object.type ? 'None' : activityDataSource.object.type}"
                          itemLabel="#{empty activityDataSource.object.type ? msgs.none : activityDataSource.object.type}"/>
          </h:selectOneMenu>
        </a4j:outputPanel>
      </h:panelGroup>
    </h:panelGrid>
    </a4j:outputPanel>
    <a4j:outputPanel id="configSettings">
      <h:messages infoClass="formInfo" warnClass="formWarn" errorClass="formError" fatalClass="formError"/>
      <h:panelGroup  rendered="#{not empty activityDataSource.object.collector}">
        <ui:include src="#{activityDataSource.configPage}"/>
      </h:panelGroup>
    </a4j:outputPanel>
    <h:panelGroup>
      <div class="buttonRow">
        <ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageApplication')}">
          <h:commandButton id="activityDataSourceSave" action="#{activityDataSource.saveAction}" value="#{msgs.button_save}" styleClass="primaryBtn"/>
        </ui:fragment>
        <h:commandButton id="activityDataSourceCancel" action="#{activityDataSource.cancelAction}" value="#{msgs.button_cancel}" styleClass="secondaryBtn"/>
      </div>
    </h:panelGroup>
    <a4j:commandButton id="refreshActivityDataSourceRulesButton"
                       style="display:none"
                       immediate="true"
                       render="activityDataSourceRulesPanel"/>
    <a4j:commandButton id="selectTypeButton" action="#{activityDataSource.selectType}" style="display:none"
                       render="configSettings, collectorSettings"
                       oncomplete="initializeSelectedConfigPage();"/>
  </h:form>

Bean类

public String getSelectedTransformationRule() {
    if (_selectedTransformationRule == null) {
        ActivityDataSourceDTO dto = getObject();
        if (dto != null)
            _selectedTransformationRule = dto.getTransformationRule();
    }
    return _selectedTransformationRule;
}
public String getSelectedCorrelationRule() {
    if (_selectedCorrelationRule == null) {
        ActivityDataSourceDTO dto = getObject();
        if (dto != null)
            _selectedCorrelationRule = dto.getCorrelationRule();
    }
    return _selectedCorrelationRule;
}

在上面的代码中，我有一个正常的onchange事件&combobox元素id＝collectorType上的ajax onchange事件。

在JSF中对同一个元素使用两个change有什么限制吗。

此外，我如何将第一个onchange合并为ajax onchange。

Answer 1

使用<f:ajax>的onevent属性如下：

<h:selectOneMenu id="collectorType"
                   value="#{activityDataSource.object.type}"
                   rendered="#{empty activityDataSource.object.id}"
                   disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
                   readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
     <f:ajax event="change" 
            execute="@this" 
            render="dsTransformationRule dsCorrelationRule"
            listener="#{activityDataSource.handleCollectorTypeChange}" 
            onevent="$('#editForm\:selectTypeButton').click();"/>
    <f:selectItem itemValue="" itemLabel="#{msgs.select_collector_type}"/>
    <f:selectItems value="#{activityDataSource.collectorTypes}"/>
</h:selectOneMenu>

还注意到，我修改了选择器'#editForm\:selectTypeButton'，以退出您按钮id中的:。

[更新]

以下是您可以做些什么来实现我们在评论中讨论的场景：

首先，分别用_selectedTransformationRule和_selectedCorrelationRule填充dsTransformationRule和dsCorrelationRule，为它们创建一个初始化方法，并在@PostConstruct方法中调用它（请选中Why use@PostConstruct？），因此在您的bean类中，您会有这样的东西：

@PostConstuct
public void init() {
    initRules();
    //include another things you want to be initializaed when this page finishes constructing. 
}
private void initRules() {
    ActivityDataSourceDTO dto = getObject();
    if (dto == null)
        return;
    if (_selectedTransformationRule == null)
        _selectedTransformationRule = dto.getTransformationRule();
    if (_selectedCorrelationRule == null)
        _selectedCorrelationRule = dto.getCorrelationRule();
}
//Let the getters do no dto access, so it won't matter if they're called twice on change
public String getSelectedTransformationRule() {
    return _selectedTransformationRule;
}
public String getSelectedCorrelationRule() {
    return _selectedCorrelationRule;
}

现在，您的f:ajax可以正常地execute和render您的选择菜单，而不用担心多次访问您的DTO层

<f:ajax event="change" onevent="selectT"
        execute="@this dsTransformationRule dsCorrelationRule"
        render="dsTransformationRule dsCorrelationRule"
        listener="#{activityDataSource.handleCollectorTypeChange}" />

这样，当调用handleCollectorTypeChange时，_selectedTransformationRule和_selectedCorrelationRule都将填充它们最后选择的值。

附带说明一下，如果您想在验证或转换阶段，或直接通过在Update Model Values阶段之前调用的事件侦听器方法，获得选择菜单dsTransformationRule和dsCorrelationRule的值，请检查此答案，以帮助您从组件中获取值。

希望这能解决你的问题，或者至少让你朝着正确的方向前进。