0

我在让 Ajax 正常工作时遇到了很多问题。我的 xhtml 文件的一部分如下：

<h:panelGrid columns="3">   
    <h:outputText value="Name of photometric system: "/>   
    <h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>   
    <h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');" styleClass="longButton"/>   
    <h:commandButton value="Update Number of Filters">   
        <f:ajax event="mouseup" execute="@this" listener="#{filters.updateNumFilters}" render="fileTable"/>   
    </h:commandButton>   
    <h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>   
    <h:commandButton value="Clear List" styleClass="longButton">   
        <f:ajax execute="@this" listener="#{filters.reset}" render="numFilters fileTable"/>   
    </h:commandButton>   
</h:panelGrid>   

<h:panelGrid id="uploadDisplay" rendered="#{filters.showUploadList}">   
    <p:dataTable id="fileTable" value="#{filters.uploadList}" var="up">   
        <p:column>       
            <h:outputText value="#{up.fileNumb}"/>   
        </p:column>   

        <p:column>        
            <h:outputText value="#{up.fileName}"/>   
        </p:column>   

        <p:column>   
            <h:outputText value="#{up.fileMess}"/>   
        </p:column>   
    </p:dataTable>   
</h:panelGrid>

基本上，当您在输入中输入一个数字id="numFilters"并单击按钮"Update Number of Filters"时，它应该使用id="fileTable"或等效地显示表格id="uploadDisplay"，然后当您单击下一步按钮"Clear List"时，它应该将输入重置id="numFilters"为零并禁用显示桌子。现在我不关心“更新过滤器数量”之前的代码。

在我添加 Ajax 之前，这一切都正常工作，数据表显示与输入字段中的数字相对应的条目数，当我单击上述两个按钮中的任何一个时，显示已正确更新。但是，整个屏幕“翻转”，显示的其他内容不再以我想要的方式呈现。事实上，这个 xhtml 文件包含在一个被查看的主文件中。

我尝试过以各种方式添加 Ajax，其中一种是在这里，但是我无法让它正常工作，要么整个屏幕“翻转”，要么页面没有正确更新，或者根本没有.

在我的 bean 中，我只有两个 Ajax 操作，如下所示：

public void updateNumFilters(AjaxBehaviorEvent e) {   
    // Code to set things up   
}   

public void reset(AjaxBehaviorEvent e) {   
    // Code for resetting things   
}

ActionEvent在添加 Ajax 之前，这两种方法在每种情况下都被触发，并且actionListener对于两个命令按钮都有一个，它可以正常工作。对于这两种方法我只是改成ActionEvent，AjaxBehaviorEvent否则都是一样的。

如果有人能帮我解决这个问题，我将不胜感激。我仍在学习如何使用 Ajax，并且很难理解为什么它不能正常工作，以及如何修复它。

好吧，我尝试了 p:commandButton，但仍然无法正常工作。

我现在减少了显示的代码量，以便更清楚地显示问题。我的 xhtml 代码的相关部分在这里：

<h:panelGrid columns="3">   
    <h:selectOneMenu id="filters" value="#{filters.filterSet}" style="height:25px; width:350px;">   
        <f:selectItems value="#{filters.filtersMap}"/>   
    </h:selectOneMenu>   
    <h:outputText value="   " escape="false"/>   

    <h:commandButton id="filterSelect" value="Update Filter Set" styleCass="longButton">   
        <f:ajax listener="#{filters.selectFilterSet}" execute="filters" render="userDefined"/>   
    </h:commandButton>   
</h:panelGrid>   

<h:panelGroup id="userDefined" rendered="#{filters.showUserDefined}">   

    <!-- Code that is rendered here -->   

</h:panelGroup>

bean的相关部分在这里：

@ManagedBean(name="filters")   
@SessionScoped  
public class MyFilterBean implements Serializable {   

    private boolean showUserDefined;   

    // Lots of other code   

    public void selectFilterSet(AjaxBehaviorEvent e) {   

        // Initialization code, and determine if showUserDefined is true or false.   

    }   

    public boolean isShowUserDefined() {   
        return showUserDefined;   
    }   

    // Lots of other code and various getters and setters   
}

单击命令按钮时，将触发 Ajax 事件并执行该方法中的代码，但我无法获得基于 isShowUserDefined() 的返回呈现的 xhtml 代码。

当代码是非 Ajax 并且单击命令按钮触发常规动作侦听器时，它可以正常工作，除了我得到一个“页面翻转”，这是不想要的。

如果有人可以帮助我最终解决这个问题，我真的会非常感激。

非常感谢您的回复，同时我在没有将 h:commandButton 更改为 p:commandButton 的情况下解决了它，尽管在代码的其他地方使用了 PrimeFaces。

这是我的 xhtml 代码的更完整列表，之前发布的代码现在在 #### 和 #### 注释之间更改。但是，我现在在让 Ajax 与菜单选定项一起工作时遇到问题，正如此处代码顶部附近给出的那样。我无法获得命令按钮“更新过滤器集”来正确更新 Ajax 标记给出的组件。我当然可以删除按钮并使用值更改侦听器，但这并不能解决问题。

这是xhtml代码： 

    <span id="filterDetails" style="display:none;">

    <!-- This displays any warning or error messages -->

    <h:panelGrid>
      <h:outputText value="The input data do not match - possibly a '$' was omitted for user defined filters&lt;br/&gt;"
                    styleClass="error" escape="false" rendered="#{filters.error}"/>
      <h:outputText value="You are not logged in - This only simulates file uploads" rendered="#{!login.loggedIn}"
                    style="color:red; font-weight:bold;"/>
    </h:panelGrid>

    <ui:fragment rendered="#{filters.showUserDefined}">

      <!-- This is the file upload option for user defined filters when showUserDefined is true -->

      <h:panelGrid id="fileUpload">
        <p:fileUpload fileUploadListener="#{filters.upload}" allowTypes="/(\.|\/)txt$/"
                      sizeLimit="10000" update="fileTable" description="Select Text File"
                      disabled="#{!filters.showUploadList}"/>
      </h:panelGrid>

      <!-- This controls the display of user defined filters when showUserDefined is true -->

<!--#### Start of previously listed code that has been changed ####-->

      <h:panelGrid id="photsys" columns="3">
        <h:outputText value="Name of photometric system: "/>
        <h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>
        <h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');"
                         styleClass="longButton"/>
        <h:commandButton value="Update Number of Filters">
          <f:ajax execute="numFilters" listener="#{filters.updateNumFilters}" render="fileTable"/>
        </h:commandButton>
        <h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>
        <h:commandButton value="Clear List" styleClass="longButton">
          <f:ajax listener="#{filters.reset}" render="numFilters fileTable"/>
        </h:commandButton>
      </h:panelGrid>

      <!-- This generates a table of uploaded user defined filter when showUserDefined is true -->

      <h:panelGrid>
        <p:dataTable id="fileTable" value="#{filters.uploadList}" var="up" styleClass="#{filters.display}">
          <p:column>    
            <h:outputText value="#{up.fileNumb}"/>
          </p:column>

          <p:column>     
            <h:outputText value="#{up.fileName}"/>
          </p:column>

          <p:column>
            <h:outputText value="#{up.fileMess}"/>
          </p:column>
        </p:dataTable>
      </h:panelGrid>

<!--#### End of previously listed code that has been changed ####-->

    </ui:fragment>

    </span>

    <!-- This generates a table of labeled input fields for filters for Option 2 only -->

    <ui:fragment rendered="#{filters.opt2}">
      <table class="filterTable">
        <tr>
          <ui:repeat value="#{filters.filterCells}" var="item" varStatus="status">
            <f:verbatim rendered="#{status.index mod 5 == 0 and status.index gt 0}">
              &lt;/tr&gt;&lt;tr&gt;
            </f:verbatim>
            <td><h:outputText value="#{item.filterPair}" escape="false"/><br/>
            <h:inputText size="4" value="#{item.userInput}"/></td>
          </ui:repeat>
        </tr>
      </table>
    </ui:fragment>

任何想法都会受到欢迎 - 非常感谢。

4

1 回答 1

0

您可以使用p:commandButtonJSF内置的h:commandButton. Primefaces commandButton 默认在 Ajax 中完成他的工作。

<p:commandButton actionListener="#{filters.updateNumFilters}" 
update="@form" id="numFilterButton" value="Update Number of Filters"/>

基本上，这样做是在支持 bean 中调用侦听器，然后更新@form您想要的元素或任何元素。当然，请确保您将所有内容都放入h:form. 查看组件的展示页面。

http://www.primefaces.org/showcase/ui/commandButton.jsf

于 2013-01-07T18:28:17.450 回答