使Ajax工作的问题

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

您可以使用p:commandButton来代替JSF的内置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

相关内容

最新更新

热门标签：