java - JSF onchange事件

我有一个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>

豆类

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。

最佳答案

使用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这将帮助您从组件中获得价值。

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

关于java - JSF onchange事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23006444/