JSF AJAX命令按钮和表
我的菜单有问题。这将获得users数据库表中的users 但当我尝试在SearchBar字段中键入一个名称并单击SearchButton时，什么都没有发生。我已经计算出，它将刷新整个第四页，然后执行按钮操作，并将整个页面刷新为第五页JSF AJAX命令按钮和表,ajax,jsf,commandbutton,Ajax,Jsf,Commandbutton,我的菜单有问题。这将获得users数据库表中的users 但当我尝试在SearchBar字段中键入一个名称并单击SearchButton时，什么都没有发生。我已经计算出，它将刷新整个第四页，然后执行按钮操作，并将整个页面刷新为第五页 <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="../../templates/default.xhtml">
<ui:define name="title">Any great stuff</ui:define>
<ui:define name="content">
<div class="row container">
<div class="small-12 columns">
<h1>Any great stuff</h1>
<div class="row">
<div class="small-12 large-12 columns">
<section class="class">
<div class="row">
<h:form>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
<f:selectItem id="actionItem0" itemValue="0" itemLabel="Choose"/>
<f:selectItem id="actionItem1" itemValue="1" itemLabel="Delete"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Übernehmen" class="button postfix" action="#{adminController.actionUser}" />
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="roleDropbown" value="#{adminController.role}">
<f:selectItem id="roleItem0" itemValue="0" itemLabel="Choose item"/>
<f:selectItem id="roleItem1" itemValue="1" itemLabel="Item2"/>
<f:selectItem id="roleItem2" itemValue="2" itemLabel="Item3"/>
<f:selectItem id="roleItem3" itemValue="3" itemLabel="Item4"/>
<f:selectItem id="roleItem4" itemValue="4" itemLabel="Item5"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Wechseln" class="button postfix" action="#{adminController.changeRole}" />
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<input type="text" id="usersearch" value="#{adminController.searchvalue}" placeholder="Suchen..."/>
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="@none" />
</h:commandButton>
</div>
</div>
</div>
</h:form>
</div>
<table>
<thead>
<tr>
<th width="5"><input onClick="selectAll(this)" type="checkbox"/></th>
<th></th>
<th>Number</th>
<th width="250">Name</th>
<th width="250">E-Mail</th>
<th width="150">Role</th>
</tr>
</thead>
<tbody>
<ui:repeat value="#{adminController.userList}" var="user">
<tr>
<td><input type="checkbox" name="user[]" value=""/></td>
<td><img src="#{user.picture}" alt="Picture"/></td>
<td>#{user.registerNumber}</td>
<td>#{user.name}</td>
<td><a href="mailto:#{user.email}">#{user.email}</a></td>
<td>#{user.role}</td>
</tr>
</ui:repeat>
</tbody>
</table>
</section>
</div>
</div>
</div>
</div>
<script src="../../js/script.js"></script>
</ui:define>
</ui:composition>
有什么好东西吗
有什么好东西吗
数
名称
电子邮件
角色
#{user.registerNumber}
#{user.name}
#{user.role}
public List<User> getUserList()
public List getUserList（）
（我已经重命名了itemvalues，这没什么，你不必担心）你的搜索按钮包含标签。所以当你们点击按钮时，它不会提交页面。只发送ajax请求。但是render=@none。这意味着不更新表单。如果您像这样更改render=@表单，它应该可以工作
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:inputText id="usersearch" value="#{adminController.searchvalue}" />
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" styleClass="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="@form" />
</h:commandButton>
</div>
</div>
</div>
<f:ajax execute="@form" render="myDataTable" />
抱歉，没有什么更新：重新加载DataTable可以正常工作。 这是我当前的xhtml：
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
template="../../templates/default.xhtml">
<ui:define name="title">Benutzerverwaltung</ui:define>
<ui:define name="content"
<ui:include src="../../partials/navigationbar.xhtml"/>
<f:metadata>
<f:event listener="#{adminController.openPage}" type="preRenderView" />
</f:metadata>
<div class="row container">
<div class="small-12 columns">
<h1><h:outputText value="Benutzerverwaltung"/></h1>
<div class="row">
<div class="small-12 large-12 columns">
<section class="class">
<h:form>
<div class="row">
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:commandButton id="refreshButton" value="Userliste neu laden" class="button postfix" action="#{adminController.reloadUsers}">
<f:ajax execute="@form" render="myDataTable"/>
</h:commandButton>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
<f:selectItem id="actionItem0" itemValue="0" itemLabel="Aktion wählen..."/>
<f:selectItem id="actionItem1" itemValue="1" itemLabel="Löschen"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandLink value="Übernehmen" class="button postfix" actionListener="#{adminController.actionUser}">
<f:ajax execute="@form" render="myDataTable" />
</h:commandLink>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="roleDropbown" value="#{adminController.role}">
<f:selectItem id="roleItem0" itemValue="0" itemLabel="Rolle wählen..."/>
<f:selectItem id="roleItem1" itemValue="1" itemLabel="Student"/>
<f:selectItem id="roleItem2" itemValue="2" itemLabel="Tutor"/>
<f:selectItem id="roleItem3" itemValue="3" itemLabel="Dozent"/>
<f:selectItem id="roleItem4" itemValue="4" itemLabel="Admin"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Wechseln" class="button postfix" actionListener="#{adminController.changeRole}">
<f:ajax execute="@form" render="myDataTable" />
</h:commandButton>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:inputText id="usersearch" value="#{adminController.searchvalue}" p:placeholder="Suchen..."/>
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="myDataTable"/>
</h:commandButton>
</div>
</div>
</div>
</div>
<h:dataTable id="myDataTable" value="#{adminController.userList}" var="user" binding="#{adminController.dataTable}">
<h:column>
<f:facet name="header"><!-- CheckBox -->
<h:selectBooleanCheckbox onclick="selectAll(this)" />
</f:facet>
<h:selectBooleanCheckbox value="#{user.select}"/>
</h:column>
<h:column>
<img value-id="#{user.id}" src="#{user.picture}" alt="Picture"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Matrikelnummer -->
<h:outputText value="Matrikelnummer"/>
</f:facet>
<h:outputText value="#{user.registerNumber}"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Name -->
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Email -->
<h:outputText value="Email"/>
</f:facet>
<h:outputLink value="mailto:#{user.email}">
<h:outputText value="#{user.email}"/>
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header"><!-- Rolle -->
<h:outputText value="Rolle"/>
</f:facet>
<h:outputText value="#{user.role}"/>
</h:column>
</h:dataTable>
</h:form>
</section>
</div>
</div>
</div>
</div>
</ui:define>
</ui:composition>
贝努特泽维尔沃顿
=1&角色谢谢。但这会呈现表单，其中包含按钮。如何重新渲染表体？编辑：点击searchButton后，它将刷新整个页面4次，然后点击searchButton。但什么也没发生/再次感谢你。这很有效。但是我将在ArrayList的返回中得到一个SQLException“参数索引超出范围（1>参数数量，即0）”。datatable与ArrayList兼容吗？我在打开页面时使用了带有元数据侦听器的@PostConstruct方法来呈现页面。这是可行的，但它试图获得两倍的用户列表。为什么它要两次行动？
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
template="../../templates/default.xhtml">
<ui:define name="title">Benutzerverwaltung</ui:define>
<ui:define name="content"
<ui:include src="../../partials/navigationbar.xhtml"/>
<f:metadata>
<f:event listener="#{adminController.openPage}" type="preRenderView" />
</f:metadata>
<div class="row container">
<div class="small-12 columns">
<h1><h:outputText value="Benutzerverwaltung"/></h1>
<div class="row">
<div class="small-12 large-12 columns">
<section class="class">
<h:form>
<div class="row">
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:commandButton id="refreshButton" value="Userliste neu laden" class="button postfix" action="#{adminController.reloadUsers}">
<f:ajax execute="@form" render="myDataTable"/>
</h:commandButton>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
<f:selectItem id="actionItem0" itemValue="0" itemLabel="Aktion wählen..."/>
<f:selectItem id="actionItem1" itemValue="1" itemLabel="Löschen"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandLink value="Übernehmen" class="button postfix" actionListener="#{adminController.actionUser}">
<f:ajax execute="@form" render="myDataTable" />
</h:commandLink>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="roleDropbown" value="#{adminController.role}">
<f:selectItem id="roleItem0" itemValue="0" itemLabel="Rolle wählen..."/>
<f:selectItem id="roleItem1" itemValue="1" itemLabel="Student"/>
<f:selectItem id="roleItem2" itemValue="2" itemLabel="Tutor"/>
<f:selectItem id="roleItem3" itemValue="3" itemLabel="Dozent"/>
<f:selectItem id="roleItem4" itemValue="4" itemLabel="Admin"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Wechseln" class="button postfix" actionListener="#{adminController.changeRole}">
<f:ajax execute="@form" render="myDataTable" />
</h:commandButton>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:inputText id="usersearch" value="#{adminController.searchvalue}" p:placeholder="Suchen..."/>
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="myDataTable"/>
</h:commandButton>
</div>
</div>
</div>
</div>
<h:dataTable id="myDataTable" value="#{adminController.userList}" var="user" binding="#{adminController.dataTable}">
<h:column>
<f:facet name="header"><!-- CheckBox -->
<h:selectBooleanCheckbox onclick="selectAll(this)" />
</f:facet>
<h:selectBooleanCheckbox value="#{user.select}"/>
</h:column>
<h:column>
<img value-id="#{user.id}" src="#{user.picture}" alt="Picture"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Matrikelnummer -->
<h:outputText value="Matrikelnummer"/>
</f:facet>
<h:outputText value="#{user.registerNumber}"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Name -->
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
</h:column>
<h:column>
<f:facet name="header"><!-- Email -->
<h:outputText value="Email"/>
</f:facet>
<h:outputLink value="mailto:#{user.email}">
<h:outputText value="#{user.email}"/>
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header"><!-- Rolle -->
<h:outputText value="Rolle"/>
</f:facet>
<h:outputText value="#{user.role}"/>
</h:column>
</h:dataTable>
</h:form>
</section>
</div>
</div>
</div>
</div>
</ui:define>
</ui:composition>
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.event.ActionEvent;
import java.util.*;
@SessionScoped
@ManagedBean
public class AdminController {
private int action, role;
private String searchvalue, dbsearch;
private int userID;
private static Database db;
private HtmlDataTable dataTable = new HtmlDataTable();
/**
* Fills the datatable
*
*
*/
public List<User> getUserList(){
System.out.println("getUserList()");
System.out.println("searchvalue:"+searchvalue);
getwholeUsers();
return db.get().getItems();
}
public void collectCheckboxes(){
int anz = dataTable.getRowCount();
for(int i = 0; i < anz; i++){
dataTable.setRowIndex(i);
User ts = (User) dataTable.getRowData();
System.out.println(ts.getId() + " - " + ts.isSelect());
}
}
/**
*
* This method will be executed, when the page is opened or refreshed
*/
@PostConstruct
public void openPage(){
System.out.println("openPage()");
getwholeUsers();
}
/**
* reloads the usertable with all users
*
*
*/
public void reloadUsers(){
System.out.println("ReloadUsers()");
getwholeUsers();
}
/**
*
* Grabs the whole users from database
*
**/
private void getwholeUsers(){
db = Database.getInstance().prepare("SELECT * FROM users");
}
/**
* Search the typed text in usersearch in database
*
*
*/
public void searchUser(){
System.out.println("searchUser()");
// searchvalue="Robert";
dbsearch = "%"+searchvalue+"%";
System.out.println("dbsearch:"+dbsearch);
db = Database.getInstance().prepare("SELECT * FROM users WHERE name LIKE ? OR email LIKE ? OR registernumber LIKE ?");
db.with(dbsearch); // name
db.with(dbsearch); // email
db.with(dbsearch); // registernumber
System.out.println("Search success");
db.get();
System.out.println("Search db.get success");
}
/**
* Makes an action on selected user, values got from the itemValue of actionDropwdown
* 0 = do nothing
* 1 = delete User
*
* 13 ACTION 1 collectCB openPage 4
*/
public void actionUser(ActionEvent event){
System.out.println("action:"+action);
collectCheckboxes();
userID = 7;
switch (action){
case 0:
Flash.setFlashMessage("error", "Bitte eine Aktion auswählen");
break;
case 1:
db = Database.getInstance().prepare("DELETE FROM users WHERE id = ?");
db.with(Integer.toString(userID)); // id
db.run();
break;
default:
break;
}
}
/**
* Sets the role ("type" in Database) on selected user, values got from the itemValue of roleDropdown
* 0 = no nothing
*
* Recognize the type convention:
* Student = 1
* Tutor = 2
* Dozent = 3
* Admin = 4
*
*
*
*
*/
public void changeRole(ActionEvent event){
collectCheckboxes();
userID=8;
if (role >= 1 && role <= 4){
Database db = Database.getInstance().prepare("UPDATE users SET type = ? WHERE id = ?");
db.with(Integer.toString(role));
db.with(Integer.toString(userID));
db.run();
} else if (role == 0){
Flash.setFlashMessage("error", "Bitte eine Rolle auswählen");
} else {
Flash.setFlashMessage("error", "Kein gültiger Wert");
}
}
public void setAction(int action) {
this.action = action;
}
public int getAction() {
return action;
}
public void setRole(int role) {
this.role = role;
}
public int getRole() {
return role;
}
public void setSearchvalue(String searchvalue) {
this.searchvalue = searchvalue;
}
public String getSearchvalue() {
return searchvalue;
}
public void setDataTable(HtmlDataTable dataTable) {
this.dataTable = dataTable;
}
public HtmlDataTable getDataTable() {
return dataTable;
}
}