java - JSF onchange 事件

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;
}

在上面的代码中，我在组合框元素 id=collectorType 上有一个普通的 onchange 事件和一个 ajax onchange 事件。

在 JSF 中对同一元素使用两个更改是否有任何限制。

另外，如何将第一个 onchange 合并到 ajax onchange。

Answer 1

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

<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 中。

[更新]

您可以执行以下操作来实现我们在评论中讨论的场景:

首先填充 dsTransformationRule和dsCorrelationRule与 _selectedTransformationRule和_selectedCorrelationRule分别为它们创建一个初始化方法，并在 @PostConstruct 中调用它方法( check 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填充了他们最后选择的值。

顺便说一句，如果您想获取选择菜单 dsTransformationRule 的值和dsCorrelationRule在验证或转换阶段，或直接通过在 Update Model Values 之前调用的事件监听器方法阶段，检查this answer这将帮助您实现组件的值(value)。

希望这能解决您的问题，或者至少为您指明正确的方向。