[英]Rendering table h:dataTable with f:ajax when select h:selectOneMenu confuses f:validateLength
Trying to fix this. 试图解决这个问题。
If I click the button Add Topic, a required message will show up at the field Name. 如果单击添加主题按钮,则必填消息将显示在名称字段中。 However, if I select the division and click Add Topic again, the required message don't show up!
但是,如果我选择部门并再次单击“添加主题”,则不会显示所需的消息!
If I remove the ajax call: 如果我删除了ajax调用:
f:ajax event="valueChange" render="topics"
It works! 有用! But then, I don't get my table updated when select a element.
但是,当选择一个元素时,我没有更新我的表。 Is there a way to update the table without the ajax call?
有没有一种方法可以不用ajax调用来更新表? Or I am doing something wrong?
还是我做错了什么?
Also, if the ajax is called, the showMessageInDialog in the TopicBean don't work anymore... 另外,如果调用了ajax,TopicBean中的showMessageInDialog将不再起作用...
topics.xhtml topic.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/pure-release-0.6.0/pure-min.css"/>
<h:outputStylesheet name="./css/pure-release-0.6.0/grids-responsive-min.css"/>
<title>Company</title>
</h:head>
<h:body>
<h:form id="divisions_list" class="pure-form pure-form-stacked" enctype="multipart/form-data" style="margin: 15px">
<div>
<img src="images/logo.png" alt="Company Logo"/>
<br/><br/>
</div>
<fieldset>
<div class="pure-g">
<legend style="margin-top: 15px">Filters</legend>
<div class="pure-u-1 pure-u-md-1-3">
<label for="divisions">Division Name:</label>
<h:selectOneMenu id="divisions" value="#{TopicsBean.topic.division.id}">
<f:selectItem itemLabel="Select..." itemValue="-1" />
<f:selectItems value="#{TopicsBean.divisions}" var="division" itemValue="#{division.id}" itemLabel="#{division.name}" />
<f:ajax event="valueChange" render="topics" />
</h:selectOneMenu>
</div>
<legend style="margin-top: 15px">Topic List</legend>
<div class="pure-table">
<h:dataTable id="topics" value="#{TopicsBean.topics}" var="topics_list">
<h:column >
<f:facet name="header">#</f:facet>
<h:outputText value="#{topics_list.id}"/>
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{topics_list.name}"/>
</h:column>
</h:dataTable>
</div>
<legend style="margin-top: 15px">Add Topic</legend>
<div class="pure-u-1 pure-u-md-1-3">
<label for="topic_name">Name:</label>
<h:inputText id="topic_name" size="30" maxlength="50" value="#{TopicsBean.topic.name}" validatorMessage="required" immediate="true">
<f:validateLength minimum="3" />
</h:inputText>
<h:message for="topic_name" style="color:red" showSummary="false"/>
</div>
<legend style="margin-top: 15px"></legend>
<br/>
<h:commandButton id="addTopic" value="Add Topic" action="#{TopicsBean.addTopic}" class="pure-button pure-button-primary"/>
</div>
</fieldset>
</h:form>
<p:dialog id="errorID" widgetVar="errorVar">
<h:form id="errorForm">
<p:commandButton value="OK" type="button" onclick="errorID.hide()" />
</h:form><br/>
</p:dialog>
</h:body>
</html>
TopicsBean.java TopicsBean.java
import buildgc.jdbc.DBConnection;
import buildgc.model.Company;
import buildgc.model.Division;
import buildgc.model.Topic;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;
@ManagedBean(name="TopicsBean")
@SessionScoped
public class TopicsBean implements Serializable {
private Division division;
private Topic topic;
private List<Division> divisions = new ArrayList<Division>();
private List<Topic> topics = new ArrayList<Topic>();
public TopicsBean(){
defaultValues();
}
public void defaultValues(){
this.division = new Division();
this.topic = new Topic();
}
public void addTopic(){
if(this.topic.getDivision().getId() == -1){
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Missing data", "Please select a Division.");
RequestContext.getCurrentInstance().showMessageInDialog(message);
return;
}
if(DBConnection.getInstance().saveTopic(this.topic)){
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", "Topic successfully added.");
RequestContext.getCurrentInstance().showMessageInDialog(message);
this.topic = new Topic();
}else{
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_FATAL, "Error", "Please contact the administrator.");
RequestContext.getCurrentInstance().showMessageInDialog(message);
}
}
public Division getDivision() {
return division;
}
public void setDivision(Division division) {
this.division = division;
}
public List<Company> getCompanies() {
return DBConnection.getInstance().getCompanies();
}
public List<Division> getDivisions(){
return DBConnection.getInstance().getDivisions();
}
public List<Topic> getTopics(){
return DBConnection.getInstance().getTopics(this.topic.getDivision());
}
public Topic getTopic() {
return topic;
}
public void setTopic(Topic topic) {
this.topic = topic;
}
}
If anyone is facing the same problem, I found a simple solution... Instead of using: 如果有人遇到相同的问题,我找到了一个简单的解决方案...而不是使用:
<f:ajax event="valueChange" render="topics" />
Use: 采用:
<p:ajax event="valueChange" update="topics" />
This solves me 2 problems: 这为我解决了2个问题:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.