JSF AJAX CommandButton и таблица

У меня проблема с моим меню. Это позволит получить пользователей, которые находятся в таблице базы данных пользователей.

Но когда я пытаюсь ввести имя в поле поиска и нажимаю кнопку поиска, ничего не происходит. Я понял, что он обновит всю страницу четвертой, затем выполнит действие кнопки и обновит всю страницу как пятую.

<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>

Мой adminController.java использует

public List<User> getUserList()

для заполнения значений таблицы. Это работает хорошо, когда я даю значение поиска статичное значение, оно тоже будет работать. Что мне нужно ввести в свой xhtml выше? (Проблема в том, что я ничего не знаю о x/html и его тегах, поэтому, пожалуйста, позаботьтесь об этом.) Кто-то сказал мне, что я должен использовать Panelgroup, но я не знаю, где. (Я переименовал значения элементов, вам не о чем беспокоиться)


person quantatheist    schedule 31.05.2014    source источник


Ответы (2)


ваш searchButton содержит тег ‹f:ajax/›. поэтому, когда вы нажимаете кнопку, она не отправляет страницу. просто отправляет запрос ajax. но рендер=@none. это означает, что форма не обновляется. если вы измените вот так render=@form, это должно сработать.

<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>

ОБНОВЛЕНИЕ:

используйте ‹h:dataTable/› вместо ‹ui:repeat/›

 <h:dataTable id="myDataTable" value="#{adminController.userList}" var="user">
        <h:column>
            <img src="#{user.picture}" alt="Picture"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Number"/>
            </f:facet>
            <h:outputText value="#{user.registerNumber}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Name"/>
            </f:facet>
            <h:outputText value="#{user.name}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <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">
                <h:outputText value="Role"/>
            </f:facet>
            <h:outputText value="#{user.role}"/>
        </h:column>
    </h:dataTable>

теперь вы можете обновить только свою таблицу.

<f:ajax execute="@form" render="myDataTable" />
person bhdrk    schedule 31.05.2014
comment
Спасибо. Но это визуализирует форму, где в ней находятся кнопки. Как я могу повторно отобразить тело таблицы? РЕДАКТИРОВАТЬ: после нажатия кнопки поиска вся страница будет обновлена ​​​​4 раза, а затем будет действовать кнопка поиска. Но ничего не происходит. :/ - person quantatheist; 31.05.2014
comment
Еще раз спасибо. Это работает. Но я получу индекс параметра SQLException вне допустимого диапазона (1 > число параметров, равное 0) в возврате моего списка ArrayList. Совместим ли datatable с ArrayList? - person quantatheist; 01.06.2014
comment
Я использовал метод @PostConstruct с прослушивателем метаданных для отображения страницы при ее открытии. Это работает, но он пытается получить в два раза больше пользователей. Почему он действует дважды? - person quantatheist; 01.06.2014

Извините, небольшое обновление: перезагрузка 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>

И мой AdminController:

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;
}

}

Кто-то сказал мне, что что-то с моим сервлетом (я понятия не имею) не так. Таким образом, при нажатии на мои кнопки он перезагрузит список пользователей 9 раз, затем выполните это действие, а затем снова перезагрузится 5 раз. Когда я открываю страницу по ссылке или в первый раз, она дважды выполняет мою openPage() (у которой есть @PostConstruct). Надеюсь, что это поможет вам.

(Другой вопрос: как правильно получить идентификатор элемента, который отображается и проверяется в таблице - в данном случае идентификатор пользователя. Я выберу 1 или более флажков, чтобы выполнить изменение роли или удаление пользователя) РЕДАКТИРОВАТЬ : Я обновил оба исходника. Я нашел ответ (http://www.java-forum.org/allgemeines-ee/56126-datatable-checkboxen.html), чтобы прочитать выбранные флажки, но все они неверны. Я понял, что (когда я нажимаю кнопку действия) он выполняет getUserList() 13 раз, затем actionUser() один раз, collectCheckboxes() один раз, openPage() один раз и getUserList() 4 раза. Надеюсь, это поможет вам. :/

person quantatheist    schedule 04.06.2014