Ajax – JSF2 + Primefaces 3.2 ajax update

ajaxjsf-2primefaces

I'm having difficult to update this both h:form and p:panelGrid, so can u help me?
I've tried @form too, and nothing happens. The expected behavior only happens if I press F5.

xhtml:

<h:form id="slct_img_form">
<p:panel header="Nova categoria">
    <div style="margin: 2% 0 1.7% 0;">
        <p><b>2.ยบ Passo:</b> Selecione uma imagem para representar a categoria.</p></pre>
    </div>
    <p>debugging selected: #{catalogCategoryController.picasaPhoto.title}</p>
    <p:dataGrid id="imgs_to_slct" var="img" value="#{siteImgsPicasaController.picasaPhotos}"  
                columns="3" rows="6" paginator="true"
                emptyMessage="Nenhuma imagem at&eacute; o momento!"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                rowsPerPageTemplate="6,9,12">


        <p:column>

            <p:panel header="#{img.title}" style="text-align:center; width: 300px;">
                <table border="0" style="margin: 0 auto;">
                    <tr>&nbsp;</tr>
                    <tr>
                        <td colspan="3">
                            <p:lightBox group="false" transition="false">
                                <h:outputLink value="#{img.sourceUrl}" title="#{img.title}">
                                    <h:graphicImage value="#{img.thumbnailUrl}" />
                                </h:outputLink>
                            </p:lightBox> 
                        </td>
                    </tr>                                                            
                    <tr>
                        <td colspan="3">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><b>Dimens&otilde;es:</b> #{img.width} x #{img.height} pixels</td>
                    </tr>
                    <tr>
                        <td>

                            <p:commandButton title="Selecionar" value="Selecionar"
                                             rendered="#{img.sourceUrl ne catalogCategoryController.picasaPhoto.sourceUrl}" 
                                             update=":slct_img_form:imgs_to_slct">


                                <f:setPropertyActionListener value="#{img}" 
                                                             target="#{catalogCategoryController.picasaPhoto}" />
                            </p:commandButton>
                                <p:commandButton title="Selecionar" value="Selecionar" icon="ui-icon-check"
                                                 rendered="#{img.sourceUrl eq catalogCategoryController.picasaPhoto.sourceUrl}"
                                                 disabled="true" />
                        </td>
                    </tr>
                    <tr>&nbsp;</tr>
                </table>
            </p:panel>

    </p:column>

</p:dataGrid>
    <div style="font-weight: bold; margin: 2% 0 1% 0;">
    <p:commandButton value="Voltar" icon="ui-icon-arrow-1-w"
                     ajax="false" type="submit"
                     action="new">

    </p:commandButton>
    <p:commandButton value="Gravar" icon="ui-icon-disk"
                     ajax="false" type="submit"
                     action="#{catalogCategoryController.add}">

    </p:commandButton>
    </div>
</p:panel>
</h:form>

ManagedBean:

@Named
@SessionScoped
public class CatalogCategoryController implements Serializable{

...

private PicasaPhoto picasaPhoto;
public PicasaPhoto getPicasaPhoto() {
    return picasaPhoto;
}
public void setPicasaPhoto(PicasaPhoto picasaPhoto) {
    this.picasaPhoto = picasaPhoto;
    this.selectedImage = new Media(picasaPhoto, currentAccount);
}

....
} 

Thanks,

Best Answer

Add prependId="false" to form properties, then primefaces won't add form ID before other components ids, otherwise you have to specify "full" path to component (if it is not in the particular form). Then try it with update="@form" or update=":imgs_to_slct"