p:dialog validation fails when using p:layoutunit

[zobbo]

Hello,

I've been trying to get a menu working with layoutunit. What I'd like to do is have the menu selection load the main content in the centre layout without reloading the whole page. I have achieved that using ajax update. However this seems to have broken my dialog validation. Now when I changed menu options (i.e. load another page in the centre layout, then go back to the original page) the dialog misbehaves - valid input fails ajax validation and the values in the dialog don't update (i.e changing the values in the form always results in the same value being submitted)

One thing I noticed us that setting the dialog to dynamic solves the problem initially - but then in subsequent page swaps it fails again. Alos refreshing the page via the browser also resolves the problem.

What is the correct way to navigate without reloading the whole page using layoutunit?

My code is below:

Index page containing the menu:

Code: Select all

<p:layout style="min-width:400px;min-height:700px;background-color:black">
    <p:layoutUnit position="west" resizable="false" size="300" minSize="40" maxSize="200">
        <h:form>   
    	<p:menu>
        	 <p:submenu label="Menu">
            	<p:menuitem value="Stocks" update="optionPanel" actionListener="#{menuView.selectStock}"/>
            	<p:menuitem value="Portfolio" update="optionPanel" actionListener="#{menuView.selectPortfolio}"/>
        	</p:submenu>
    	</p:menu>
    </h:form>
    </p:layoutUnit>
 
    <p:layoutUnit position="center">
        <h3 style="margin-top:0">Plain Menu</h3>
        <p:outputPanel id="optionPanel">
        <ui:include src="#{menuView.view}"> 
            </ui:include>
        </p:outputPanel>
    </p:layoutUnit>
</p:layout>

Index backing bean:

Code: Select all

@ManagedBean
@SessionScoped
public class MenuView implements Serializable {
	
	private static final long serialVersionUID = -1015364935820045523L;
	private String view;

	public void selectStock() {
	    setView("stocks.xhtml");
	}
	
	public void selectPortfolio() {
		setView("portfolio.xhtml");
	}

	public String getView() {
		return view;
	}

	public void setView(String view) {
		this.view = view;
	}
	
}

And one of the dialogs in the stocks page that has problems:

Code: Select all

<p:dialog id="buyDlg" header="Buy Shares" widgetVar="buyDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" appendTo="@(body)" dynamic="true">
        			<p:outputPanel id="buyDetail" style="text-align:center;">
            			<p:panelGrid  columns="2" columnClasses="label,value" style="margin:auto">
            			<h:outputText value="Member" />
                		<h:outputText value="#{stocksView.selectedStock.bidOrderId.member.memberId}" />
                		<h:outputText value="Party" />
                		<h:outputText value="#{stocksView.selectedStock.bidOrderId.member.party}" />
                		<h:outputText value="Price" />
                		<h:outputText value="#{stocksView.selectedStock.price}" />
                		</p:panelGrid>              		
                		<h:form style="padding-top:10px;">
                			<p:messages id="Buymsgs" />
                			<h:panelGrid columns="3" cellpadding="5" style="margin:auto">
                			<h:outputText value="Amount:" />
                			<p:inputText id="bidAmount" value="#{stocksView.bidAmount}" required="true" label="BuyAmount" style="max-width:50px;">
                			<p:ajax update="msgBidAmount" event="keyup" listener="#{stocksView.keyUp}" />   
                			</p:inputText>
                			<p:message for="bidAmount" id="msgBidAmount" display="icon"/>
                			<h:outputText value="Price:" />
                			<p:inputText id="bidPrice" value="#{stocksView.bidPrice}" required="true" label="BuyPrice" style="max-width:50px;">
                			<p:ajax update="msgPrice" event="keyup"/>   
                			</p:inputText>
                			<p:message for="bidPrice" id="msgPrice" display="icon"/>
                			</h:panelGrid>		
            				<p:commandButton process="@this,bidAmount,bidPrice" update="Buymsgs,:form:prices" value="Buy" id="BuyButton" styleClass="ui-priority-primary" style="margin-top:10px;">
            					<f:actionListener binding="#{stocksView.submitBidOrder()}"/>
    						</p:commandButton>      				
        				</h:form> 
        				</p:outputPanel>      			
    			</p:dialog>

[kukeltje]

What is the correct way to navigate without reloading the whole page using layoutunit?

Using ajax... I use it all the time.

From your code it is not clear where the dialog is used, when etc... Please create an 'mcve' http://stackoverflow.com/help/mcve

[zobbo]

Hi Ronald,

Thanks for the response. I've pushed a cve that replicates the problem to https://github.com/izomezzo/cve

Steps to replicate are:

1. Click the Stocks menu option
2. Click Buy
3. The validation should work on entering amount 50, price 1.4
4. Select the Portfolio menu option
5. Select the Stocks option
6. Click the Sell commandlink
7. The validation will fail even with valid amounts (as in step 3)

Thanks,
Zobbo

[kukeltje]

There is a reason there is an M in MCVE...

[zobbo]

Yeah I need to prune some of those directories. The relevant files are https://github.com/izomezzo/cve/tree/ma ... rc/cve/web and https://github.com/izomezzo/cve/tree/ma ... WebContent if that helps.

Cheers,
Zobbo

[zobbo]

Well, I found a solution of sorts. If I set the outputpanel which contains the main layout unit with deferred=true and set the menuitems to ajax=false it doesn't refresh the whole page, only refreshing the outputpanel and the dialog validation still works correctly. The downside is the slightly delayed loading icon when changing pages.

Cheers,
Zobbo

[kukeltje]

Thanks for letting us know. But if you don't have an mcve, it is hard for us to know where this was and what it solves...

[zobbo]

Hi,

I've tidied up my mcve so hopefully it is easier to use now. It is here https://github.com/izomezzo/cve/tree/master/cve

To recap, the problem is that the ajax validation fails in the stocks page Buy and Sell dialog forms when valid input is entered if the user navigates between option menus (i.e. it works if the user stays on the stocks page but not if the user goes to the portfolio page and back to the stocks page). To get around that I added deferred=true to the outputPanel in index2.xhtml and added ajax=false to the menuitems in the same page. But I'm not entirely happy with that solution and suspect there's some issue with the way I've assembled my menu pages. Any advice would be appreciated or if I need to tweak my mcve please let me know.

Please let me know what you think.
Cheers,
Zobbo