JSF Ajax Update不更新组件

Question

Following is the scenario. I have left panel which contains all the menu items. When I click on the menu item the corresponding pages should be loaded in the center / main panel with out page refresh. So I use ajax (setupdate method) to load the page when the menu item is clicked.

My requirement is I have the same page loaded for some set of menu items. But based on the menu item selection I need to retrieve the records from the database hence the page layout remains the same. But I get the same page served for all the menu items. Only for the first time, the call is sent to the backing bean and for subsequent clicks, no call is made to the backing bean and the same page is getting served.

I am using PrimeFaces 3.4.1 and JSF 2.0

Note: I am dynamically loading the screen. In Client page, I use #{menuMB.screenName} to load the screen dynamically.

Following is the code snippet.

Template page

<f:view contentType="text/html; charset=UTF-8" encoding="UTF-8" >

        <div id="outerWrapper">

            <div id="contentWrapper">
                <div id="leftPanel">
                    <div class="companylogo">

                    </div>
                    <div class="jsmenu">
                        <ui:insert name="leftPanel">
                        </ui:insert>
                    </div>
                </div>

                <div id="mainContentWrapper">
                    <div id="pageHeader">
                        <ui:insert name="pageHeader">
                        </ui:insert>
                    </div>
                    <div id="mainContent">
                        <div id="mainStyle">
                            <ui:insert name="mainContent">
                            </ui:insert>
                        </div>
                    </div>
                </div>
                <div class="clearFloat"></div>
            </div>
            <div class="clearFloat"></div>
            <div id="footer">
                <ui:insert name="footer">
                </ui:insert>
            </div>
        </div>
    </f:view>

Client XHTML

All the pages are loaded inside the mainOutputPanel which is inside the mainContentForm. I am getting the screen name that needs to be loaded from the backing bean menuMB.

<h:body>
    <ui:composition template="/pages/protected/templates/layoutTemplate.xhtml">


        <ui:define name="pageHeader">
            <ui:include src="/pages/protected/templates/loginHeader.xhtml">
            </ui:include>
        </ui:define>
        <ui:define name="leftPanel">
            <h:form id="leftMainForm">
                <ui:include src="/pages/protected/templates/requestfactoryleft.xhtml">
                </ui:include>
            </h:form>
        </ui:define>
        <ui:define name="mainContent" >
            <h:form id="mainContentForm" enctype="multipart/formdata" prependId="true">
                <h:panelGroup id="mainOutputPanel" layout="block" >
                    <ui:include src="#{menuMB.screenName}">
                    </ui:include>
                </h:panelGroup>

            </h:form>

        </ui:define>
        <ui:define name="footer">
            <ui:include src="/pages/protected/templates/footer.xhtml">
            </ui:include>
        </ui:define>
    </ui:composition>

</h:body>

Left XHTML (Contains the menu which is loaded dynamically from the database)

<ui:composition 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">

     <div class="testmenu" style="padding:7px; 
             border-radius: 10px 10px 10px 10px; margin-top: 7px; 
             background: darkgray;  width: 187px;">
        <div id="rfMainMenu">
            <p:panelMenu id="rfleftMainMenu" model="#{menuMB.mnuModel}" >
            </p:panelMenu>
        </div>

     </div>


</ui:composition>

Backing bean (to load the pages dynamically when menu item is selected)

@SessionScoped
@ManagedBean(name = "menuMB")
public class MenuMB implements Serializable {


    @PostConstruct
    public void loadMenu() {

      if (getLoggedUser() != null) {
          fmList = loginService.getMenuForUser(getLoggedUser());
      }

    //Call createMenu method to populate the sub menu and menu items

     createMenu(fmList);
  }

    public void loadScreensForUser(ActionEvent event) {
        MenuItem menuItem = (MenuItem) event.getComponent();
        String attrName;

    try {
        if (menuItem != null) {
            selectedMenuItem = menuItem.getId();

            //Get the screen name from the properties file
            menuUrl = RequestFactoryContextUtil.getResourceBundleString(menuItem.getId());

            //Set the screen name to be displayed
            setScreenName(menuUrl);

            //Call update to update the form  
          RequestContext.getCurrentInstance().update("mainContentForm:mainOutputPanel");

        }


    } 

    catch (Exception exc) {

    }

  }


  private void createMenu(List<FunctionMaster> fmList) {
    //Submenu rfSubMenu = new Submenu();

    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.setUpdate(":mainContentForm:mainOutputPanel");
                                rfSubItem.setAjax(true);
                                rfSubItem.setRendered(true);
                                rfSubItem.setIcon("search");
                                //rfSubItem.setIcon("ui-icon-search");

                                 ExpressionFactory factory = FacesContext.getCurrentInstance().getApplication().getExpressionFactory();
                                 //rfSubItem.setActionExpression(factory.createMethodExpression(FacesContext.getCurrentInstance().getELContext(), #{menuMB.loadScreenFromMenu}", Void.class, new Class[]{ActionEvent.class}));
                                 MethodExpression methodExpr = factory.createMethodExpression(FacesContext.getCurrentInstance().getELContext(), "#{menuMB.loadScreensForUser}", Void.class, new Class[]{ActionEvent.class});
                                 MethodExpressionActionListener actionListener = new MethodExpressionActionListener(methodExpr);
                                 rfSubItem.addActionListener(actionListener);

                                 rfSubMenu.getChildren().add(rfSubItem);
                                //addMenuItem(rfSubItem);
                            }
                        }
                    }
                    //mnuModel.addSeparator(new Separator());

                }

            }
        }
      } catch (Exception ex) {
        String excep = ex.getMessage();
    }

  }

}

Answer 1

I noticed that <h:body> resides outside the <ui:composition this will cause the <h:body> to be dropped.... (anything outside the <ui:composition is being ignored)

I suggest you to place the <h:body> tags inside the template itself