Changed HTML Markup of Custom Components upon Ajax Render

Question

I have a custom component that extends HtmlInputText + custom renderer to write Twitter Bootstrap html markup. for example:

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

it renders:

<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>

Everithing works fine until I need to update this specific component via ajax render attribute. The component loses the html markup.

After 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>

If I try to ajax update the whole form. It works. If I nest it inside a h:panelGroup it works.

It doesn't work only when I try to update specifically my component with it's id inside the render attribute.

This is the override for getStyleClass() on my custom component:

    @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

After a lot of research, I found out that this is not a JAVA, JSF or AJAX problem.

It's a JQuery issue.

I was able to solve it based on question:

JSF Ajax render lose CSS with Jquery Mobile