JSF不起作用：選擇SelectOneMenu並使用Ajax動態更新其他SelectOneMenu

Question

我一直在試圖找出問題所在，但對我而言卻沒有成功的結果。 我在Google上搜索時，嘗試了幾個不同的工作示例，但沒有一個幫助我解決任務。

問題在於，當更改“類別” selectOneMenu時，“消息” selectOneMenu不會更新。 它不會加載選定類別的消息。

在HTML中，我只有兩個selectOneMenu元素。 在服務類中，我創建“用戶”，“類別”和“消息”，並將它們添加到鏈接列表。

的HTML

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>

    <h:body>
        <h:form>
            <h:outputText value="You have no categories made yet..." rendered="#{empty categoryBean.categories}" />
            <h:selectOneMenu value="#{categoryBean.category}" rendered="#{not empty categoryBean.categories}">
                <f:selectItems value="#{categoryBean.categories}" />
                <f:ajax event="change" render="messages" listener="#{categoryBean.changeCategory}" />
            </h:selectOneMenu>

            <h:outputText value="This category has no messages yet..." rendered="#{empty categoryBean.messages}" />
            <h:selectOneMenu value="#{categoryBean.message}" id="messages" rendered="#{not empty categoryBean.messages}">
                <f:selectItems value="#{categoryBean.messages}" />
            </h:selectOneMenu>
        </h:form>
    </h:body>
</html>

豆角，扁豆：

    package beans;

    @Named(value = "categoryBean")
    @SessionScoped
    public class CategoryBean implements Serializable {
        private List<Message> messages;
        private Category category;
        private Message message;

        @Inject
        private Service service;
        /**
         * Creates a new instance of CategoryBean
         */
        public CategoryBean() {
            category = new Category();
        }

        public void setCategory(Category category) {
            this.category = category;
        }

        public Category getCategory(){
            return this.category;
        }

        public List<Category> getCategories() {
            return service.getCategories();
        }

        public List<Message> getMessages() {
            return this.category.getMessageList();
        }

        public Message getMessage() {
            return message;
        }

        public void setMessage(Message message) {
            this.message = message;
        }

        public void changeCategory() {
            this.messages = category.getMessageList();
        }
    }

服務：

package service;

@Named(value = "service")
@ApplicationScoped
public class Service {
    private final ArrayList<User> users = new ArrayList<>();

    public Service() {
        User u1 = new User("Mikolaj", "Stasinski", "mikolaj", "123456", 2);
        User u2 = new User("Toms", "Bugna", "toms", "789012", 2);
        User u3 = new User("Algie", "Tiempo", "algiemay", "123456", 1);

        users.add(u1);
        users.add(u2);
        users.add(u3);

        Category c1 = new Category(u1, "SADP", "Advanced Java");
        Category c2 = new Category(u1, "SADP Kaj", "JSF");
        Category c3 = new Category(u2, "CNDS", "Networking");

        u1.addCategory(c1);
        u1.addCategory(c2);
        u2.addCategory(c3);

        Message m1 = new Message(u3, c3, "This is a message.");
        Message m2 = new Message(u3, c1, "Another Message1");
        Message m3 = new Message(u3, c1, "Another Message2");

        u3.addMessage(m1);
        u3.addMessage(m2);
        u3.addMessage(m3);

        c1.addMessage(m2);
        c1.addMessage(m3);
        c3.addMessage(m1);
        c2.addMessage(m3);
    }

    public List<User> getUsers(){
        return new ArrayList<>(users);
    }

    public List<Category> getCategories(){
        ArrayList<Category> categoryList = new ArrayList<>();

        for (User u: users) {
            for (Category cat: u.getCategoryList()) {
                categoryList.add(cat);
            }
        }

        return categoryList;
    }
}

Answer 1

可能是因為您的偵聽器方法的簽名不正確，所以應如下所示：

public void changeCategory(AjaxBehaviorEvent event) {     
   this.messages = category.getMessageList();   
}

看一下這篇文章h：selectOneMenu中的f：ajax偵聽器方法未執行，並按照工作示例進行操作。

Answer 2

問題是渲染條件與id放在同一位置。 當未渲染組件時，找不到其ID。 然后，第一個選擇不能正確刷新第二個選擇。 將具有呈現條件的組件插入具有用於刷新的ID的容器中：

<h:form>
    <h:outputText 
        value="You have no categories made yet..." 
        rendered="#{empty categoryBean.categories}" />

    <h:selectOneMenu 
        value="#{categoryBean.category}" 
        rendered="#{not empty categoryBean.categories}">
        <f:selectItems value="#{categoryBean.categories}" />
        <f:ajax event="change" 
            render="messages" 
            listener="#{categoryBean.changeCategory}" />
    </h:selectOneMenu>

    <h:panelGroup id="messages">
        <h:outputText 
            value="This category has no messages yet..." 
            rendered="#{empty categoryBean.messages}" />
        <h:selectOneMenu 
            value="#{categoryBean.message}" 
            rendered="#{not empty categoryBean.messages}">
            <f:selectItems value="#{categoryBean.messages}" />
        </h:selectOneMenu>
    </h:panelGroup>

</h:form>

更新：第二個問題是您的選擇正在管理對象。 在內部，selectOneMenu使用字符串來管理值，使用需要實現的對象以及針對每種類型使用Converter。 在這個Converter類中，您需要將您的對象轉換為String，然后將該String再次轉換為同一對象。 您可以在這里看到更多信息：如何在JSF 2中創建自定義掩護？

JSF不起作用：選擇SelectOneMenu並使用Ajax動態更新其他SelectOneMenu

問題描述

2 個解決方案

解決方案1
1 2014-11-21 15:35:00

解決方案2
1 已采納 2014-11-21 19:45:12

JSF不起作用：選擇SelectOneMenu並使用Ajax動態更新其他SelectOneMenu

問題描述

2 個解決方案

解決方案1 1 2014-11-21 15:35:00

解決方案2 1 已采納 2014-11-21 19:45:12

解決方案1
1 2014-11-21 15:35:00

解決方案2
1 已采納 2014-11-21 19:45:12