JSF onchange事件

时间:2014-04-11 07:40:40

标签: java jquery jsf

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

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事件&amp;组合框元素id = collectorType上的ajax onchange事件。

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

另外,我如何首先将onchange合并到ajax onchange。

1 个答案:

答案 0 :(得分:2)

使用onevent的{​​{1}}属性,如下所示:

<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> 以转义按钮ID中的'#editForm\\:selectTypeButton'

[UPDATE]

您可以采取哪些措施来实现我们在评论中讨论的方案:

首先分别用:dsTransformationRule填充dsCorrelationRule_selectedTransformationRule,为它们创建初始化方法,并在_selectedCorrelationRule方法中调用它( check Why use @PostConstruct?),所以在你的bean类中你会有这样的东西:

@PostConstruct

现在,您的@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:ajaxexecute您的选择菜单,而不必多次访问您的DTO图层

render

这样,当调用<f:ajax event="change" onevent="selectT" execute="@this dsTransformationRule dsCorrelationRule" render="dsTransformationRule dsCorrelationRule" listener="#{activityDataSource.handleCollectorTypeChange}" /> 时,handleCollectorTypeChange_selectedTransformationRule都会填充上次选择的值。

在旁注中,如果要在验证或转换阶段获取选择菜单_selectedCorrelationRuledsTransformationRule的值,或者直接通过在{{{{}之前调用的事件侦听器方法获取1}}阶段,检查this answer,以帮助您从组件中获取值。

希望这可以解决您的问题,或者至少让您朝着正确的方向前进。