Include xhtml page with ajax request in multi-level page template (JSF, Primefaces) -
i trying create application using jsf , primefaces. unfortunately, have issue page templates , not manage work out properly.
i have page template this. want load left menu , content ajax request without loading whole page. however, when click page2 link, gets broken this.
i tried different combinations of how place form, include, composition tags but, it's still same. change server response according place of form tag. when checked response seems alright. not try load whole page , nothing seems wrong me:
<?xml version='1.0' encoding='utf-8'?> <partial-response id="j_id1"><changes><update id="javax.faces.viewroot"><![cdata[<script id="innerlayout_s" type="text/javascript">$(function(){primefaces.cw( "layout","widget_innerlayout",{id:"innerlayout",widgetvar:"widget_innerlayout",west:{paneselector:'#left',size:"200",resizable:false,closable:false},center:{paneselector:'#innercontent',size:"auto",resizable:false,closable:false}},"layout");}) ;</script><div id="innerlayout"><div id="left" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">left menu</span></div><div class="ui-layout-unit-content ui-widget-content"> <form id="leftform" name="leftform" method="post" action="/magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="leftform" value="leftform" /> page2 left menu </form></div></div><div id="innercontent" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content"> <form id="contentform" name="contentform" method="post" action="/magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="contentform" value="contentform" /> page2 content </form></div></div></div>]]></update><update id="j_id1:javax.faces.viewstate:0"><![cdata[2499963408064928377:-8018685353649439725]]></update></changes></partial-response> however, when console, there error below:
uncaught typeerror: cannot read property '0' of null primefaces.js.xhtml?ln=primefaces&v=5.0:2 primefaces.ajax.utils.updateelement primefaces.js.xhtml?ln=primefaces&v=5.0:2 primefaces.ajax.responseprocessor.doupdate primefaces.js.xhtml?ln=primefaces&v=5.0:2 primefaces.ajax.response.handle primefaces.js.xhtml?ln=primefaces&v=5.0:2 p.success primefaces.js.xhtml?ln=primefaces&v=5.0:2 jquery.js.xhtml?ln=primefaces&v=5.0:25 cd.firewith jquery.js.xhtml?ln=primefaces&v=5.0:25 cg jquery.js.xhtml?ln=primefaces&v=5.0:25 here codes:
default.xhtml:
<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"> <h:head> <title>my application</title> </h:head> <h:body> <h:outputstylesheet name="css/style.css" /> <p:layout id="fullpagelayout" fullpage="true"> <p:layoutunit id="header" position="north" size="80"> <h:form id="headerform"> <ui:insert name="headerui"> <ui:include src="header.xhtml" /> </ui:insert> </h:form> </p:layoutunit> <p:layoutunit id="content" position="center"> <ui:insert name="contentui" /> </p:layoutunit> </p:layout> </h:body> </html> header.xhtml:
<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"> <p:tabmenu id="tabmenu" activeindex="#{templatebean.activeindex}"> <p:menuitem value="page1" action="#{templatebean.navigatetopage(0)}" update=":contentform,tabmenu" /> <p:menuitem value="page2" action="#{templatebean.navigatetopage(1)}" update=":contentform,tabmenu" /> </p:tabmenu> </ui:composition> content.xhtml:
<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"> <p:layout id="innerlayout"> <p:layoutunit id="left" position="west" size="200" header="left menu"> <h:form id="leftform"> <ui:insert name="leftui" /> </h:form> </p:layoutunit> <p:layoutunit id="innercontent" position="center"> <h:form id="contentform"> <ui:insert name="centerui" /> </h:form> </p:layoutunit> </p:layout> </ui:composition> index.xhtml:
<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" template="templates/default.xhtml"> <ui:define name="contentui"> <ui:include src="#{templatebean.activepage}.xhtml" /> </ui:define> </ui:composition> page1.xhtml:
<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" template="templates/content.xhtml"> <ui:define name="leftui"> <h:outputtext value="page1 left menu" /> </ui:define> <ui:define name="centerui"> <h:outputtext value="page1 content" /> </ui:define> </ui:composition> page2.xhtml:
<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" template="templates/content.xhtml"> <ui:define name="leftui"> <h:outputtext value="page2 left menu" /> </ui:define> <ui:define name="centerui"> <h:outputtext value="page2 content" /> </ui:define> </ui:composition> templatebean.java:
package com.myapplication.pagebeans; import org.springframework.context.annotation.scope; import org.springframework.stereotype.component; @component @scope("request") public class templatebean { private int activeindex; private string activepage = "page1"; public string navigatetopage(int index) { activeindex = index; switch (index) { case 0: activepage = "page1"; break; case 1: activepage = "page2"; break; default: break; } return activepage; } public int getactiveindex() { return activeindex; } public string getactivepage() { return activepage; } } sorry long question , images (site not let me load images because of reputation) but, tried give information as can. in advance.
i searched lot , @ different questions below ones:
Comments
Post a Comment