CODEWITHSUNDEEP
jsfprimefaces
Raaz
Raaz

Reputation: 125

primefaces orderlist not getting updated with the changed order

I have a primefaces p:orderList which is displayed in a popup on click of a button. When I change the order of Items in the orderlist, and click on Save Order button on the popup, I'm not seeing the list with the changed order. PFB my code - 

<p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
<p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
                        appendToBody="true">  
    <p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
    <p:commandButton ajax="true"  value="Save Order" process="@this" type="submit" actionListener="#{toolBean.setToolOrder}" oncomplete="toolOrderPopup.hide()"/>
    <p:commandButton value="Cancel" onclick="toolOrderPopup.hide()" type="button"/>   
</p:dialog>

In the bean:

public void setToolOrder(){ 
    System.out.println("toolOrderList-" + BeanStringConverter.convertToString(toolOrderList));
}

Please let me know what could be wrong with the code.

Upvotes: 4

Views: 4596

Answers (1)

Akos K
Akos K

Reputation: 7133

You need to process the p:orderlist to get the orderList model saved:

<p:commandButton ajax="true" value="Save Order" 
                 process="@this toolOrderList"
                 actionListener="#{toolBean.setToolOrder}"
                 oncomplete="toolOrderPopup.hide()"/>

Unrelated to your question you probably have something like:

<h:form>
    ...
    <p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
    ...
    <p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
                    appendToBody="true">  
        <p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
        <p:commandButton ajax="true" value="Save Order" 
                         process="@this" 
                         actionListener="#{toolBean.setToolOrder}" 
                         oncomplete="toolOrderPopup.hide()"/>
        <p:commandButton value="Cancel" 
                         onclick="toolOrderPopup.hide()" type="button"/>   
    </p:dialog>
</h:form>

if so, then see what primefaces doc says about appentToBody:

Use appendToBody with care as the page definition and html dom would be different, for example if dialog is inside an h:form component and appendToBody is enabled, on the browser dialog would be outside of form and may cause unexpected results. In this case, nest a form inside a dialog.

An alternative structure could be the following:

    <h:form id="first">
        ...
        <p:commandButton ajax="true" id="toolOrderButton" value="Tool Order" onclick="toolOrderPopup.show()" type="button"/>
        ...
    </h:form>
    <p:dialog header="Tool Order" severity="alert" widgetVar="toolOrderPopup"
                    appendToBody="true">
        <h:form id="second">
            <p:orderList id="toolOrderList" controlsLocation="right" value="#{toolBean.toolOrderList}" var="tool" itemLabel="#{tool}" itemValue="#{tool}" iconOnly="true"/>
            <p:commandButton ajax="true"  value="Save Order"
                             process="@this toolOrderList" 
                             actionListener="#{toolBean.setToolOrder}" oncomplete="toolOrderPopup.hide()"/>
            <p:commandButton value="Cancel" onclick="toolOrderPopup.hide()" type="button"/>
        </h:form> 
    </p:dialog>
</h:form>

Upvotes: 6

Related Questions