Databases
StackOverflow2013
Postsdbo
POLoading a xhtml page dynamically using using AJAX when Primefaces Menuitem is clicked
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading a xhtml page dynamically using using AJAX when Primefaces Menuitem is clicked
    primarykey
    data
    text
    <p>I need to load the xhtml page dynamically in the main content sectin when a menu item is selected in the left side section thus avoiding page refresh. </p> <p>I have created a Prime Faces dynamic panel menu on the left section with list of sub menus and menu items for each sub menu. The menu is loaded dynamically based on the role of the logged in user. When the menu item is selected, the corresponding Action Listener is called but the pages are not loaded or displayed</p> <p>The application is being developed using Prime Faces 3.4.1 / JSP 2.0 / Spring Framework 3.1.1</p> <h2>More Information on the Application Background</h2> <p>The Screen layout is divided into four sections. </p> <p>Header - Logo and icons that is common to all Footer - contains Footer information Left side Bar - Contains the menu. This is dynamically populated based on the role of the logged in user Main Content - This displays the actual .xhtml pages corresponding to the selected menu item on the left side</p> <p>I have used the Facelet Template to define the layout and contents. Following is the template defined</p> <h2>layoutTemplate.xhtml</h2> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"&gt; &lt;h:head&gt; &lt;title&gt;RF&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="# {facesContext.externalContext.requestContextPath}/javax.faces.resource/main.css.xhtml?ln=css" /&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;f:view contentType="text/html; charset=UTF-8" encoding="UTF-8" &gt; &lt;div id="outerWrapper"&gt; &lt;div id="pageHeader"&gt; &lt;ui:insert name="pageHeader"&gt; &lt;/ui:insert&gt; &lt;/div&gt; &lt;div id="contentWrapper"&gt; &lt;div id="leftPanel"&gt; &lt;div class="jsmenu"&gt; &lt;ui:insert name="leftPanel"&gt; &lt;/ui:insert&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="mainContent"&gt; &lt;div id="mainStyle"&gt; &lt;h:panelGroup id="mainOutputPanel"&gt; &lt;h:form id="mainContentForm"&gt; &lt;ui:insert name="mainContent"&gt; &lt;/ui:insert&gt; &lt;/h:form&gt; &lt;/h:panelGroup&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clearFloat"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;ui:insert name="footer"&gt; &lt;/ui:insert&gt; &lt;/div&gt; &lt;/div&gt; &lt;/f:view&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <h2>Main Screen layout</h2> <p>Following is the Main screen layout which include the template defined above. I have included the header.xhtml, footer.xhtml and rfleft.xhtml which contains the dynamically populated menu. In the , I am getting the page to be loaded from the JSF backing bean</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"&gt; &lt;h:body&gt; &lt;ui:composition template="/pages/protected/templates/layoutTemplate.xhtml"&gt; &lt;ui:define name="pageHeader"&gt; &lt;ui:include src="/pages/protected/templates/loginHeader.xhtml"&gt; &lt;/ui:include&gt; &lt;/ui:define&gt; &lt;ui:define name="leftPanel"&gt; &lt;ui:include src="/pages/protected/templates/rfleft.xhtml"&gt; &lt;/ui:include&gt; &lt;/ui:define&gt; &lt;ui:define name="mainContent"&gt; &lt;ui:include id="mainPage" src="#{menuMB.screenName}"&gt; &lt;/ui:include&gt; &lt;/ui:define&gt; &lt;ui:define name="footer"&gt; &lt;ui:include src="/pages/protected/templates/footer.xhtml"&gt; &lt;/ui:include&gt; &lt;/ui:define&gt; &lt;/ui:composition&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <h2>Left Menu to load the menu dynamically (rfleft.xhtml)</h2> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core"&gt; &lt;h:body&gt; &lt;h:form id="leftMainForm"&gt; &lt;p:panelMenu style="width:200px" model="#{menuMB.mnuModel}"&gt; &lt;/p:panelMenu&gt; &lt;/h:form&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <h2>JSF Backing Bean</h2> <pre><code>@SessionScoped @ManagedBean(name = "menuMB") public class MenuMB implements Serializable { @ManagedProperty(value = "#{LoginService}") ILoginService loginService; private String screenName = ""; String menuUrl = ""; User loggedUser = null; private List&lt;FunctionMaster&gt; fmList = null; private MenuModel mnuModel = new DefaultMenuModel(); public MenuMB() { loggedUser = (User) RFContextUtil.getSessionFromContext("user"); } @PostConstruct public void loadMenu() { if (loggedUser != null) { //Load the actions to be performed by the logged user . Loading as menu item fmList = loginService.getMenuForUser(loggedUser.getUserID()); } createMenu(fmList); } private void createMenu(List&lt;FunctionMaster&gt; fmList) { try { if (fmList != null) { for (FunctionMaster sub : fmList) { if (sub.getParentFunctionID() == 0) { Submenu rfSubMenu = new Submenu(); rfSubMenu.setLabel(sub.getScreenDisplayName()); getMnuModel().addSubmenu(rfSubMenu); for (FunctionMaster item : fmList) { if (item.getParentFunctionID() != 0) { if (item.getParentFunctionID() == sub.getFunctionID()) { MenuItem rfSubItem = new MenuItem(); rfSubItem.setId(item.getFunctionName() + item.getFunctionID().toString()); rfSubItem.setValue(item.getScreenDisplayName()); rfSubItem.setImmediate(true); rfSubItem.setProcess("@form"); rfSubItem.setPartialSubmit(true); rfSubItem.setUpdate(":mainOutputPanel"); rfSubItem.setAjax(true); rfSubItem.setRendered(true); //Adding Action Listener ExpressionFactory factory = FacesContext.getCurrentInstance().getApplication().getExpressionFactory(); MethodExpression methodExpr = factory.createMethodExpression(FacesContext.getCurrentInstance().getELContext(), "#{menuMB.loadScreenFromMenu}", Void.class, new Class[]{ActionEvent.class}); MethodExpressionActionListener actionListener = new MethodExpressionActionListener(methodExpr); rfSubItem.addActionListener(actionListener); rfSubMenu.getChildren().add(rfSubItem); } } } } } } } catch (Exception ex) { String excep = ex.getMessage(); } } public void loadScreenFromMenu(ActionEvent event) { MenuItem menuItem = (MenuItem) event.getComponent(); String attrName; try { if (menuItem != null) { screenName = RequestFactoryContextUtil.getResourceBundleString(menuItem.getId()); //Set the screen that needs to be displayed. This is the property that is used in the Main Screen layout setScreenName(screenName); } } catch (Exception exc) { } } } </code></pre> <p>Any help is appreciated.</p> <p>-Baskar</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USBaskar
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POLoading a xhtml page dynamically using using AJAX when Primefaces Menuitem is clicked
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload