在 Ajax 渲染时更改了 HTML 自定义组件的标记

Question

我有一个自定义组件，它扩展了 HtmlInputText + 自定义呈现器来编写 Twitter Bootstrap html 标记。例如：

<bf:inputText id="a" label="L1" value="#{dummyMB.str}" formLayout="horizontal" labelSize="2" inputSize="6"/>

它呈现：

<div id="form:a-componente" class="form-group ">
    <label for="form:a" class=" control-label col-md-2">L1</label>
    <div class="col-md-3 ">
        <input id="form:a" type="text" name="form:a" class="form-control form_a" dir="ltr">
    </div>
</div>

一切正常，直到我需要通过 ajax 渲染属性更新此特定组件。该组件丢失了 html 标记。

ajax之后：

<div id="form:a-componente" class="form-group ">
    <label for="form:a" class=" control-label col-md-2">L1</label>
    <div class="col-md-6 ">
        <input id="form:a" class="form-group " dir="">
    </div>
</div>

如果我尝试 ajax 更新整个表单。有用。如果我将它嵌套在 h:panelGroup 中，它就可以工作。

只有当我尝试使用 render 属性中的 id 专门更新我的组件时，它才起作用。

这是我自定义组件上 getStyleClass() 的覆盖：

    @Override
public String getStyleClass() {

    String styleClass = super.getStyleClass();
    if(StringUtils.isEmpty(styleClass)) {
        styleClass = "";
    }

    if(!styleClass.contains(BFConstantes.DEFAULT_STYLE_CLASS)) {
        styleClass += BFConstantes.DEFAULT_STYLE_CLASS;
    }

    if(!styleClass.contains(FaceletsFunctions.styleClassId(this))) {
        // O JSF usa o caracter ":" para identificar o componente
        // O jQuery usa o caracter ":" como reservado
        // Para evitar o conflito, eu substituo os ":" do id do componente por "_" e adiciono como classe CSS
        // Assim o jQuery o código referenciar os componentes JSF individualmente.
        styleClass += FaceletsFunctions.styleClassId(this);
    }

    setStyleClass(styleClass);
    return super.getStyleClass();
}

Answer 1

经过大量研究，我发现这不是 JAVA、JSF 或 AJAX 的问题。

这是一个 JQuery 问题。

我能够根据问题解决它：

JSF Ajax render lose CSS with Jquery Mobile

在 Ajax 渲染时更改了 HTML 自定义组件的标记

Changed HTML Markup of Custom Components upon Ajax Render

ajax

twitter-bootstrap

jsf-2

custom-component

custom-renderer