我在让 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<br/>"
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}">
</tr><tr>
</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>
任何想法都会受到欢迎 - 非常感谢。