[SOLVED] p:ajax update="@(.ui-panel) ..." rendering

[smithh032772]

Wow, look at this!



I just duplicated this behavior in my JSF/PrimeFaces web app. One of the endusers mentioned this to me earlier, but I could not see her screen/monitor, and I had no idea what she was talking about. Talk about the need to regression test after migrating from PrimeFaces p:layout to PrimeFaces extensions pe:layout.

In the screen capture above, that is how the page renders AFTER p:autoComplete's p:ajax update="@(.ui-panel) ...".

Code: Select all

    <ui:composition>
        
        <p:panel header="Customer">
            
            <h:panelGroup>
                <p:autoComplete id="customerId" value="#{pf_ordersController.selectedCustomer}"
                                completeMethod="#{pf_customerController.complete}" var="c"
                                itemLabel="#{c.customerName}" itemValue="#{c}"
                                maxResults="10" queryDelay="300" size="50" onblur="close()">
                    <p:ajax partialSubmit="false" event="itemSelect" global="false"
                            onstart="displayLoadingImage(true)" oncomplete="displayLoadingImage(false)"
                            update="@(.ui-panel) :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
                    <f:facet name="itemtip">
                        <h:panelGrid  columns="2" cellpadding="3">
                            <f:facet name="header">
                                <h:outputText value="#{c.customerName}" />
                            </f:facet>
                            <h:outputText value="Number:" />
                            <h:outputText value="#{c.customerId}" />

                            <h:outputText value="Leader:" />
                            <h:outputText value="#{c.leaderPointOfContactId ne null ? c.leaderPointOfContactId.pointOfContactName : ''}"/>
                        </h:panelGrid>
                    </f:facet>
                </p:autoComplete>
                <p:commandButton value="Select" icon="ui-icon-search"
                                 actionListener="#{pf_ordersController.setPageEditCustomer(pf_customerController.prepareSelectCustomerForOrder())}"
                                 update="@(.ui-panel) :orderEditForm:formMessages :orderEditForm:_ajax_status">
                </p:commandButton>
            </h:panelGroup>
            
        </p:panel>

I only use @(.ui-panel) on 2 xhtml pages in the JSF/PrimeFaces web app. This worked well when this page had p:layout, but not anymore, since this page now has pe:layout. Anyway, to resolve, I'm about to remove the PrimeFaces Selector (PFS), and see what happens. Can/will report my test results later.

The strange thing is... this behavior does not happen for the p:commandButton that you see in the code above. It only occurs on the p:autoComplete p:ajax. Both update="..." (for p:ajax and p:commandButton) have the same update="...". See that?

The p:commandButton displays a dataTable at bottom of screen, allowing user to use a dataTable to select a 'new' (or another) customer instead of using the p:autoComplete to select a new/another customer.

Also, this behavior is not duplicated when user clicks Select button, after selecting a new customer via the datatable, and the original view is restored afterwards.

[smithh032772]

I just recognized the difference and maybe what caused the problem. The code below is called to serve the similar function as blockUI, but what I do is display:none (onstart of p:ajax) and then display:inline (oncomplete of p:ajax).

Code: Select all

function displayLoadingImage(value) {
    if (value) {
        document.getElementById('pageContentPanel').style.display = 'none';
        document.getElementById('loadingImage').style.display = 'inline';
    }
    else {
        document.getElementById('loadingImage').style.display = 'none';
        document.getElementById('pageContentPanel').style.display = 'inline';
    }
}

I'm about to remove onstart/oncomplete calling this javascript, to see, if it resolves this issue, because this behavior is not occurring on another page that has any/all p:inputText p:ajax update="@(.ui-panel) ...", and also, they don't call the javascript function above.

[smithh032772]

Okay, changed p:ajax to the following, and decided to use PrimeFaces blockUI client side methods which I already had available on the xhtml page (for the container h:form).

Code: Select all

<p:ajax partialSubmit="false" event="itemSelect"
        onstart="bui.show();" oncomplete="bui.hide();"
        update="@(.ui-panel) :orderEditForm:formMessages :orderEditForm:_ajax_status"/>

This works great. Honestly, I don't know if the display:inline was really working or not prior to migration from p:layout to pe:layout. I think I started using my version of blockUI (display:none, display:inline) on this page when I migrated to pe:layout.

FYI, this is added in issue tracker as Issue # 288. I think this issue can be marked as Invalid or WontFix, since this is clearly a user/developer error.