ajax - 如何在 p :accordionPanel from outside? 的单个选项卡中使用 AJAX 更新组件

Question

我有一个 p:accordionPanel，它代表一个项目列表，在每个选项卡中都有一个表单。在提交任何重复表单时，可能需要额外的数据，即弹出 p:dialog 提示用户输入更多数据。该对话框定义在 Accordion 面板之外，因为与 Accordion 中的项目不同，一次只能显示其中一个，因此无需通过在 Accordion 的每个选项卡中重复它来增加提供的 HTML。

Accordion 的定义如下(经过简化但包含所有相关描述符):

<p:accordionPanel id="myAccordion" value="#{managedBean.getAccordionList}" var="item" multiple="false" dynamic="true" cache="true">

    <p:ajax event="tabChange" listener="#{managedBean.processTabChange}"/>

    <p:tab title="#{item.tabTitle}" id="itemTab">

        <h:form id="itemForm">

            <h:outputLabel for="itemName" value="Item Name:"/>
            <p:inputText id="itemName" title="Item Name:" 
                    maxlength="16" value="#{appeal.itemName}">
            </p:inputText>

因此，为 itemName 呈现的 HTML 首先是 myAccordion:0:itemForm:itemName，myAccordion:1:itemForm:itemName 在第二个，等等。

对话框定义如下:

<p:dialog id="commentDialogID" header="Enter comment" widgetVar="commentDialog" modal="true" resizable="true" height="auto">
    <h:form id="commentForm">

        <h:outputLabel for="comment" value="Comment:"/>

        <p:inputTextarea id="comment" title="Comment" 
                rows="6" cols="33"
                value="#{managedBean.activeItem.comment}"
                required="true">
            <f:ajax render="comment"/>
        </p:inputTextarea>

        <h:commandButton value="Submit" action="#{managedBean.proceed}" onclick="PF('commentDialog').hide();">
            <f:ajax render="*** ??? ***"/>
        </h:commandButton>

    </h:form>
</p:dialog> 

我一再失败的是尝试 f:ajax 仅更新 Accordion 面板中的单个选项卡，即弹出对话框的事件选项卡。我尝试使用

:myAccordion:#{managedBean.activeItem.displayIndex}:itemForm:itemName
:myAccordion:#{managedBean.activeItem.displayIndex}:itemForm
:myAccordion:#{managedBean.activeItem.displayIndex}:itemTab

代替 *** ??? *** 但它们都无法编译:

javax.faces.FacesException: <f:ajax> contains an unknown id ':myAccordion:0:itemForm' - cannot locate it in the context of the component j_idt20

如果我跳过索引标记(例如 :myAccordion:itemForm:itemName)，它会编译但在功能上什么都不做。 Item 实体类有一个 getDisplayIndex，它会准确返回事件选项卡的索引。

我的问题与 this question 中描述的问题非常相似，这并没有一个好的答案。会不会是 PrimeFaces 的限制？

Answer 1

我不知道您使用的是哪个版本的 Primefaces，但这似乎是 Primefaces 5.1.1 中的一个错误，我可以在其中重现此问题。通过升级到 Primefaces 5.2，ajax EL 可以突然找到引用的 id。如果需要，我可以发布 MCVE。

编辑:MCVE:

XHTML:

<h:form id="itemForm">
    <p:accordionPanel id="myAccordion" binding="#{accordionView}" value="#{playgroundController.users}" dynamic="true" activeIndex="#{playgroundView.activeIndex}" var="user" multiple="false">

        <p:ajax event="tabChange" update="commentDialogID"/>

        <p:tab title="#{user.name}">
                <h:outputLabel for="itemName" value="Item Name:" />
                <p:inputText id="itemName" title="Item Name:" maxlength="16"
                    value="#{user.amount}">
                </p:inputText>
                <p:commandButton value="showDialog" onclick="PF('commentDialog').show();"></p:commandButton>
        </p:tab>

    </p:accordionPanel>
</h:form>

<p:dialog id="commentDialogID" header="Enter comment" widgetVar="commentDialog" modal="true" resizable="true" height="auto">
    <h:form id="commentForm">

        <h:outputLabel for="comment" value="Comment:"/>

        <p:inputTextarea id="comment" title="Comment" 
                rows="6" cols="33"
                value="#{playgroundView.activeIndex}"
                required="true">
            <f:ajax render="comment"/>
        </p:inputTextarea>

        <p:commandButton value="Submit" onclick="PF('commentDialog').hide();" update=":itemForm:myAccordion:#{playgroundView.activeIndex}:itemName" ></p:commandButton>

    </h:form>
</p:dialog> 

PlaygroundView Bean:

请注意，在此示例中，activeIndex 必须具有初始值，否则此 EL:

update=":itemForm:myAccordion:#{playgroundView.activeIndex}:itemName"

将错误解析并抛出无法找到引用组件 ID 的错误。这当然有一个缺点，即第一个选项卡将在页面加载时打开，但这是另一个问题

private String activeIndex = "0";

public String getActiveIndex() {
    return activeIndex;
}

public void setActiveIndex(String activeIndex) {
    this.activeIndex = activeIndex;
}

PlaygroundController Bean:

private List<User> users;
@Override
    public void initializeView() {
    createUsers();
}

public void createUsers() {
        User user1 = new User();
        User user2 = new User();
        User user3 = new User();
        user1.setName("User123");
        user1.setAmount(1);
        user2.setName("User456");
        user2.setAmount(2);
        user3.setName("User12312345111111111111111111111111111");
        user3.setAmount(3);
        List<User> userList = new ArrayList<User>();
        userList.add(user1);
        userList.add(user2);
        userList.add(user3);
        users = userList;
    }

用户:

public class User implements Serializable {
    String name;
    int amount = 0;
}