Question

我在使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   
}

在添加Ajax之前，这两种方法在每种情况下由ActionEvent触发，并且两个命令按钮都有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>

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

Answer 1

您可以使用p:commandButton代替 JSF 的内置h:commandButton。 Primefaces commandButton默认在Ajax中工作。

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

基本上，正在做的是在更新@form或你想要的任何元素之后调用支持bean中的监听器。当然，你要把所有东西都变成h:form。看一下组件的展示页面。

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

让Ajax工作的问题

1 个答案: