Menu
I'm working on a schoolproject and encountered a problem with dynamic ui insert. I'm currently working in JSF2.0 / Primefaces 3 M1. The main problem is that I want to have a Primefaces dialog with dynamic content which is changed through means of a menubar.
The dialog component contains a ui:include tag with src set to a managed bean property. The menuitems are linked to bean methods that change this property.
The main problem is that the variable is not changing at all, I'm currently using alerts to show this variable. Currently working with remoteCommand but I've also already tried with action/actionlistener in the menuitem component. Any help would be appreciated.
This is the main page with the menubar and the dialog.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>KunstInHuis: Main</title>
</h:head>
<h:body style="font-size: 12px;">
<h:form id="mainForm">
<f:metadata>
<f:event type="preRenderView" listener="#{login.verifyAccess}"/>
</f:metadata>
<p:remoteCommand name="lazyANew" actionListener="#{main.goToAboNew}" onsuccess="alert('test')"/>
<p:remoteCommand name="lazyAList" actionListener="#{main.goToAboList}" onsuccess="alert('test')" />
<p:remoteCommand name="lazyASearch" actionListener="#{main.goToAboSearch}" onsuccess="alert('test')" />
<p:menubar autoSubmenuDisplay="true">
<p:submenu label="Abonnementen">
<p:menuitem value="Nieuw" onclick="lazyANew()" onsuccess="alert('#{main.goToPage}')"/>
<p:menuitem value="Lijst" onclick="lazyAList()" onsuccess="alert('#{main.goToPage}')" />
<p:menuitem value="Zoek" onclick="lazyASearch()" onsuccess="alert('#{main.goToPage}')"/>
</p:submenu>
<p:submenu label="Klanten">
<p:menuitem value="Nieuw" url="#" />
<p:menuitem value="Lijst" url="#"/>
</p:submenu>
<p:submenu label="Kunstwerken">
<p:menuitem value="Nieuw" url="#" />
<p:menuitem value="Lijst" url="#"/>
</p:submenu>
</p:menubar>
</h:form>
<p:dialog id="mainDialog" header="Abonnement aanmaken" widgetVar="dlg0" minHeight="300" minWidth="450"
resizable="true" modal="false" >
<ui:include src="#{main.goToPage}" />
</p:dialog>
</h:body>
And this is my backing bean.
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.page.beans;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
/**
*
* @author wezlee
*/
@ManagedBean(name = "main")
@ViewScoped
public class mainMenuBean implements Serializable {
private boolean panelRender=false;
private String goToPage = "./includes/forms/abboCreate.xhtml";
/** Creates a new instance of mainMenuBean */
public mainMenuBean() {
}
public void goToAboNew(ActionEvent e){
goToPage="./includes/forms/abboCreate.xhtml";
}
public void goToAboNew(){
goToPage="./includes/forms/abboCreate.xhtml";
}
public void goToAboList(ActionEvent e){
goToPage="./includes/forms/abboList.xhtml";
}
public void goToAboList(){
goToPage="./includes/forms/abboList.xhtml";
}
public void goToAboSearch(ActionEvent e){
goToPage="./includes/forms/abboSearch.xhtml";
}
public void goToAboSearch(){
goToPage="./includes/forms/abboSearch.xhtml";
}
/**
* @return the goToPage
*/
public String getGoToPage() {
return goToPage;
}
public void setGoToPage(String src){
this.goToPage=src;
}
}
985
Actually, I think the methods to update the backing value look like they work just fine. The issue is probably in how you are trying to display it. When the page is initially rendered, the value for goToPage is evaluated and placed into the content of the page returned to the user's browser. Once this value is set on the user's side, it will not re-synchronize with the backing bean until that part of the page is re-rendered.
I believe a prime faces remoteCommand allows you to do this with AJAX using update="client side id". I'm not a prime faces guy though, so I put together this little test. First change your remoteCommands:
<p:remoteCommand name="lazyANew" actionListener="#{main.goToAboNew}" update="testOutput" />
<p:remoteCommand name="lazyAList" actionListener="#{main.goToAboList}" update="testOutput" />
<p:remoteCommand name="lazyASearch" actionListener="#{main.goToAboSearch}" update="testOutput" />
Then add a simple text field to your page content with the appropriate Id:
Page target: <h:outputText value="#{main.goToPage}" id="testOutput" />
Your output text should start synchronizing. As long as that works, you can simply re-target the update from testOutput to mainDialog and you should be in business.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
