overlaypanel after action not shown

typhon · 20 Aug 2014, 10:37

Hello again,

when I navigate from "first" to "second" all works fine but when I navigate "first" --> "second" --> "first" the overlaypanel is not shown?! I see a short flicker and that's it.

My sources:

Code: Select all

<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
	  xmlns:p="http://primefaces.org/ui"
	  xmlns:pm="http://primefaces.org/mobile">

    <f:view renderKitId="PRIMEFACES_MOBILE" />

    <h:head>
    </h:head>

    <h:body>

		<pm:page id="first">            
			<pm:header title="FIRST" fixed="false">
				<a class="jqm-navmenu-link ui-nodisc-icon ui-alt-icon ui-btn-right ui-btn ui-icon-bars ui-btn-icon-notext" href="#menu" data-role="button" role="button">Menu</a>
			</pm:header>

			<pm:content>
				<h1>FIRST</h1>
			</pm:content>

			<pm:footer styleClass="footer" fixed="true" tapToggle="false">
				<p>footer</p>
			</pm:footer>

			<h:form>
				<div id="menu" data-role="panel" class="menu" data-display="overlay" data-position="right" data-theme="a">
					<p:menu>
						<p:submenu label="Menü">
							<p:menuitem value="first" action="pm:first"/>
							<p:menuitem value="second" action="pm:second"/>
						</p:submenu>
					</p:menu>
				</div>
			</h:form>
		</pm:page>

		<pm:page id="second">            
			<pm:header title="SECOND" fixed="false">
				<a class="jqm-navmenu-link ui-nodisc-icon ui-alt-icon ui-btn-right ui-btn ui-icon-bars ui-btn-icon-notext" href="#menu" data-role="button" role="button">Menu</a>
			</pm:header>

			<pm:content>
				<h1>SECOND</h1>
			</pm:content>

			<pm:footer styleClass="footer" fixed="true" tapToggle="false">
				<p>footer</p>
			</pm:footer>

			<h:form>
				<div id="menu" data-role="panel" class="menu" data-display="overlay" data-position="right" data-theme="a">
					<p:menu>
						<p:submenu label="Menü">
							<p:menuitem value="first" action="pm:first"/>
							<p:menuitem value="second" action="pm:second"/>
						</p:submenu>
					</p:menu>
				</div>
			</h:form>
		</pm:page>
		
		<p:growl id="messages" autoUpdate="true"/>
	</h:body>
</html>

thx for reply

smithh032772 · 22 Aug 2014, 19:23

maybe you should assign unique id="..." to each h:form and/or a unique ID for the overlaypanel <div id="...">

Code: Select all

         <h:form>
            <div id="menu" data-role="panel" class="menu" data-display="overlay" data-position="right" data-theme="a">
               <p:menu>
                  <p:submenu label="Menü">
                     <p:menuitem value="first" action="pm:first"/>
                     <p:menuitem value="second" action="pm:second"/>
                  </p:submenu>
               </p:menu>
            </div>
         </h:form>

or you may want to use non-ajax request

Code: Select all

                     <p:menuitem value="first" ajax="false" action="pm:first"/>
                     <p:menuitem value="second" ajax="false" action="pm:second"/>

typhon · 22 Aug 2014, 20:03

Hello,

thx for the advice.

The idea to use ajax="false" didn't work. If i gave every menu div a uniqe id it works fine but my idea is to seperate the menu to a seperate xhtml file and use ui:include to make the maintainance easier.

When I give the form a unique id the problem consits.

BR

smithh032772 · 22 Aug 2014, 20:16

interesting, that sounds similar to what showcase is doing, and I'm doing something similar, but right now, i only have primefaces_mobile single-page xhtml files. as I develop more pages, I'll see if I have this issue. i have similar XHTML like you, which I saw in primefaces mobile showcase.

for now, you will have to go what works (even if it is less maintainable).

overlaypanel after action not shown

Who is online