通过Ajax的JSF刷新列表不正确 [英] JSF refreshing list via Ajax incorrectly

问题描述

我正在尝试将某些功能从JQuery迁移到JSF，但结果却很奇怪.

I am trying to migrate some functionality from JQuery to JSF and I am getting strange results.

基本上，这是一个页面，您可以在其中导航链接(就像Web上的Windows资源管理器一样).文件夹有链接，叶子没有.为了构造它，使用了private List<Element> list;，它会相应地刷新.因此，当用户单击文件夹"时，将使用该文件夹的内容创建一个新的list.

Basically it is a page where you can navigate links (imagine like a Windows Explorer on the Web). Folders have a link and leafs don't. To construct this, it is used a private List<Element> list;, which is refreshed accordingly. So when the user clicks on a "folder", a new list is created with the contents of that folder.

问题是我得到了奇怪的结果.有时，我导航链接并正确刷新了链接，但在某些情况下，它的行为类似于重新加载页面(但不是)并将list重置为其初始值(?).例如，我导航到"name2"并得到正确的信息.但是，然后我转到"name2b"，而不是叶子，而是得到仅在init()方法中设置的"name1"，"name2"和"name3".我不知道这是怎么发生的，但是在探索源代码时，似乎c:foreach结构弄乱了id，并且页面中呈现了旧的ID(请注意，我试过了ui:repeat，但结果也相同)

The problem is that I am getting strange results. Sometimes I navigate a link and it is refreshed correctly, but in some cases it behaves like the page is reloaded (but it is not) and the list is reset to its initial values (?). For example, I navigate to "name2" and get the right things. But then I go to "name2b" and I instead of the leafs I get "name1", "name2" and "name3", which are only set in the init() method. I don't know how this happens, but exploring the source code it seems that the c:foreach structure is messing with the ids and an old ID is rendered in the page (note that I have tried ui:repeat with same incorrect results).

我该如何解决?

这是简化的代码:

<f:metadata>
   <f:viewAction action="#{controller.init}" />
</f:metadata>
...
<h:panelGroup id="visor" layout="block">
            <ul>
                <c:forEach items="#{controller.list}" var="element">
                    <li>
                        <ui:fragment rendered="#{element.folder}">
                            <h:form>
                                <h:commandButton action="#{controller.navigate(element.name)}" type="submit" value="#{element.name}" >
                                    <f:ajax render="visor" execute="@this" />
                                </h:commandButton>
                            </h:form>
                        </ui:fragment>
                        <ui:fragment rendered="#{not element.folder}">
                            <span>#{element.name}</span>
                        </ui:fragment>
                    </li>
                </c:forEach>
            </ul>
        </h:panelGroup>

还有控制器

@Named(value = "controller")
@ViewScoped
public class MyController implements Serializable {

private List<Element> list;

public void init() { //Called when loading the page
    list = new ArrayList<>();
    Element e1 = new Element("name1", true); //name and isFolder?
    Element e2 = new Element("name2", true);
    Element e3 = new Element("name3", true);
    list.add(e1);
    list.add(e2);
    list.add(e3);
}

public void navigate(String name) {
    list = new ArrayList<>();
    if (name.equals("name1")) {
         Element e1 = new Element("name1a", true);
         Element e2 = new Element("name1b", true);
         Element e3 = new Element("name1c", true);
         list.add(e1); list.add(e2); list.add(e3);
    } else if (name.equals("name2")) {
        Element e1 = new Element("name2a", true);
         Element e2 = new Element("name2b", true);
         Element e3 = new Element("name2c", true);
         list.add(e1); list.add(e2); list.add(e3);
    } else {
        Element e1 = new Element("leaf1", false);
         Element e2 = new Element("leaf2", false);
         list.add(e1); list.add(e2);
    }
}
//....

---

编辑

我的问题似乎被描述为在这里.

My problem seems to be described in here.

我必须调查这个问题是否可以带来给主体一些光线.

I have to investigate if this question can bring some light to the subject.

推荐答案

显然，它是使用基本的JSF渲染列表-我可以动态更新列表而不是表格.

Apparently it is a well-known thing that my structure cannot be dynamically updated in JSF. The solution I have to make is to use a h:datatable instead of a <ul> list (this is one thing I really dislike of JSF, but I am not sure how to render a list with basic JSF - instead of a table, that I can dynamically update.

Ajax render属性必须指定form id.

The Ajax render attribute had to specify the form id.

<h:form id="visor">
      <h:dataTable value="#{controller.list}" var="element">
                    <h:column>
                        ....
                        <h:commandButton action=.... >
                          <f:ajax render="visor" execute="@this" />
                        </h:commandButton>
                        ....
                    </h:column>
      </h:dataTable>
</h:form>

编辑:只要我渲染表单并且表单包含所有内容，UL也可以工作

Edit: The UL also worked, as long as I render the form and the form contains everything

这篇关于通过Ajax的JSF刷新列表不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！