ajax - Ajax-更新同一复合组件内的另一个组件

Question

在复合组件中使用 ajax 时，ajax 功能不起作用。代码有什么问题？

复合组件：

<composite:interface>
    <composite:attribute name="filter" required="true" type="java.lang.String" />
    <composite:attribute name="list" required="true" type="java.util.List" />
</composite:interface>
<composite:implementation>
    <h:inputText value="#{cc.attrs.filter}">
        <f:ajax event="keyup" render="#{cc.clientId}:table#{cc.clientId}" />
    </h:inputText>
    <h:dataTable id="table#{cc.clientId}" value="#{cc.attrs.list}" var="elem">
        <h:column>
            <h:outputText value="#{elem}" />
        </h:column>
    </h:dataTable>
</composite:implementation>

现在豆子

@ManagedBean
@SessionScoped
public class Ajaxcc
{
    private String filter;
    private List<String> list;

    public Ajaxcc()
    {
        list = new ArrayList<String>();
        list.add("one");
        list.add("two");
        list.add("three");
        list.add("four");
    }

    public List<String> getList()
    {
        List<String> filteredList = new ArrayList<String>();
        for (String s : list)
        {
            if (filter == null || filter.trim().equals(""))
            {
                filteredList.add(s);
            }
            else if (s.contains(filter))
            {
                filteredList.add(s);
            }
        }
        return filteredList;
    }

    public String getFilter()
    {
        return filter;
    }

    public void setFilter(String filter)
    {
        this.filter = filter;
    }
}

现在的观点：

<h:form>
    <myCustomComponent:ajaxcc list="#{ajaxcc.list}" filter="#{ajaxcc.filter}" />
</h:form>

我正在使用 myfaces 2.1.10，部署在 maven 的 tomcat 7.0.39 上。

预期行为：每当我按下 o - 按钮时，网站上的列表应该减少到一、二和四

失败：列表没有减少。

有什么解决办法？

顺便说一句，如果我将复合组件的内容放入视图中，它可以正常工作：

<h:form>
  <h:inputText value="#{ajaxcc.filter}">
    <f:ajax event="keyup" render="table" />
  </h:inputText>
  <h:dataTable id="table" value="#{ajaxcc.list}" var="elem">
    <h:column>
      <h:outputText value="#{elem}" />
    </h:column>
  </h:dataTable>
</h:form>

在这种情况下，按 o 会将列表缩小到预期值。此外，我发现复合组件ajax调用的响应对于数据表字段值似乎是“空的”；直接 ajax 调用的响应包含新列表。

score 1 · Accepted Answer

<h:inputText ...>
    <f:ajax ...render="#{cc.clientId}:table#{cc.clientId}" />
</h:inputText>
<h:dataTable id="table#{cc.clientId}" ...>

这是不必要的笨拙。两个组件都在同一个命名容器中（组合本身！），所以前缀已经隐含地由组合本身完成。后缀是有效的，但只是不必要的。复合组件自己的 ID 已经在其父命名容器组件的上下文中强制执行唯一性。在浏览器中打开页面，右键单击查看源代码并观察生成的 HTML 输出中的 ID，应该已经对此有所了解。

保持简单：

<h:inputText ...>
    <f:ajax ...render="table" />
</h:inputText>
<h:dataTable id="table" ...>

ajax - Ajax-更新同一复合组件内的另一个组件

1 回答 1

也可以看看：

ajax - Ajax-更新同一复合组件内的另一个组件

1 回答 1

也可以看看：

Related