Primefaces component does not update

Question

I have a p:dataGrid that used to update itself in 3.0.1. Now I upgraded to PF 3.1 and the ajax update event of the "availableIcons" component does not fire anymore. I don't get an error that the component is not found in the view.

The XHMTL

<h:form id="Application">
......
<p:confirmDialog id="iconDialog" message="Select one icon"
            showEffect="bounce" hideEffect="explode" header="Icon Selection"
            severity="alert" widgetVar="iconSelect" modal="false">

            <p:dataGrid id="availableIcons" var="icon"
                value="#{appEditController.availableIcons}" columns="4">

                <p:column>
                    <p:panel id="pnl" header="" style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%" id="iconPanelGrid">
                            <p:graphicImage value="/resources/icons/#{icon.icon}"
                                id="iconImage" />
                            <p:selectBooleanCheckbox id="iconSelector"
                                value="#{icon.selected}"
                                disabled="#{appEditController.isIconSelected(icon)}">
                                <p:ajax update="availableIcons" event="change"
                                    process="availableIcons"
                                    listener="#{appEditController.iconSelectedChanged(icon)}" />
                            </p:selectBooleanCheckbox>
                        </h:panelGrid>
                    </p:panel>

                </p:column>

            </p:dataGrid>

            <p:commandButton value="Done" update="currentIcon"
                action="#{appEditController.updateCurrentIcon}" ajax="false"
                oncomplete="iconSelect.hide()" />

        </p:confirmDialog>

.......
</h:form>

I don't see what's missing or what's incorrect.

This is the backing bean code

public void updateCurrentIcon() {
    for (IconVO iconVO : availableIcons) {
        if (iconVO.isSelected()) {
            log.debug("CURRENT ICON IS NOW " + iconVO.getIcon());

            currentIcon = iconVO;

            break;
        }
    }
}

public void iconSelectedChanged(IconVO iconVO) {


    if (iconVO == currentIcon) {
        log.debug("NULLING ICON");
        currentIcon = null;
    } else {
        log.debug("SETTING NEW ICON");
        currentIcon = iconVO;
    }

}

public boolean isIconSelected(IconVO iconVO) {

    log.debug("IS ICON SELECTED " + iconVO.getIcon());

    if (currentIcon == null
            || iconVO.getIcon().equals(currentIcon.getIcon())) {
        return false;
    }

    return currentIcon != null;
}

I tried to do update="@form", then the update fires but it closes the modal panel completely.

Thanks, Coen

Your concrete problem is unclear. You said that the component doesn't update, but you also said that the ajax event doesn't fire. What exactly is the concrete problem now? Don't you mean to say that the ajax request is actually fired, but that the ajax response doesn't contain the update? Look once again in browser-specific web developer toolset if you're unsure. — BalusC
OK, I mean the ajax update event does not fire anymore. The actual ajax change event still goes off. I'll rewrite that. — Coen Damen
Hi BalusC, I don't quite understand what you mean with ajax response. What happens is that the change event fires and thus the method in the listener is called, but the only component that is updated is the current checkbox, the other checkboxes on the datagrid are not evaluated. — Coen Damen
The response of the HTTP request which is fired by JavaScript. In Chrome/IE9 you can see it in "Network" tab of developer tools (press F12). In Firefox you need to install Firebug plugin for this first. — BalusC

BalusC BalusC · Accepted Answer · 2012-02-15T17:30:55

Indeed, the way how PrimeFaces locates components by relative client ID has been changed in PrimeFaces 3.1 to adhere the UIComponent#findComponent() javadoc.

In your particular case, you need to specify the absolute client ID of the <p:dataGrid> instead. Easiest way to figure it is to check the ID of the <p:dataGrid> in the generated HTML source. With the code given so far, that would be Application:availableIcons. You need to prefix it with : to make it absolute and then reference it in update as follows:

<p:ajax update=":Application:availableIcons" ... />

Update as per the comments it turns out to not work at all. You could try wrapping the table in some invisible containing component like <h:panelGroup> and update it instead. Alternatively, you could consider moving the <h:form> into the dialog and use update="@form" instead. Having the <h:form> outside the dialog is kind of odd anyway. You surely won't submit all the other inputs which are outside the dialog inside the same form.

Primefaces component does not update

1 Answers