menu and Top Menu are not working after form submit

[xbashtech]

hi guys
I have got an issue with the Menu and Top Menu buttons in the mobile and tablet layout. When the form is submitted it is not working anymore in the URL it is showing URL with the hashtag(#)

this is the topbar coding

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">


	<div id="layout-topbar" class="ShadowGray">
		<h:form>
			<div id="layout-topbar-indent">
				<a href="dashboard.xhtml"><h:graphicImage name="images/LOGO.svg" styleClass="Fleft" library="spark-layout" id="logo" class="Fleft" /></a> 
				<a href="#" id="mobile-menu-button" class="BordRad3 white ShowOnMobile"><i class="fa fa-bars"></i> Menu</a>
				<a href="#" id="mobile-menu-button-gray" class="BordRad3 white ShowOnMobile" ><i class="fa fa-caret-down"></i> Top Menu</a>



				<ul id="layout-topbar-menu">
					<li><p:commandLink styleClass="Animated05 a CursPointer" actionListener="#{generalImages.goLogin}" style="text-decoration:none;">
							<i class="fa fa-sign-out"></i>Logout </p:commandLink></li>
					<li class="fa fa-ellipsis-v menu-separator"></li>
					<li><p:commandLink styleClass="Animated05 a CursPointer" actionListener="#{generalImages.goHome}" style="text-decoration:none;">
							<i class="fa fa-home"></i> Home</p:commandLink></li>
					<li class="fa fa-ellipsis-v menu-separator"></li>
					<li><a class="Animated05 CursPointer"> <i class="fa fa-user blue"> </i> #{loginBean.username.toUpperCase()} , Welcome <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a></li>
				</ul>
			</div>
		</h:form>
	</div>
</ui:composition>

[mert.sincan]

I think you can use jsf:action with JSF2.2 in your xhtml.

Code: Select all

<li>
   <a jsf:action="#{mySession.logout}" ..><i class="fa fa-sign-out"></i> Logout</a>
</li>

More information is at;

http://www.oracle.com/technetwork/artic ... 27136.html
http://www.beyondjava.net/blog/jsf-2-2- ... eat-sheet/

[xbashtech]

I think you can use jsf:action with JSF2.2 in your xhtml.

Code: Select all

<li>
   <a jsf:action="#{mySession.logout}" ..><i class="fa fa-sign-out"></i> Logout</a>
</li>

More information is at;

http://www.oracle.com/technetwork/artic ... 27136.html
http://www.beyondjava.net/blog/jsf-2-2- ... eat-sheet/

aragorn i'm not talking regarding the logout or other things.I'm Talking about the menu and topmenu button.
It is showing when i have logged in . When i go to a form and click submit the menu and top menu dropdown is not working.

[mert.sincan]

I couldn't replicate the issue, please provide a runnable test case with; test.xhtml, TestBean.java

[xbashtech]

I couldn't replicate the issue, please provide a runnable test case with; test.xhtml, TestBean.java

HI aragorn the problem is update of form u see the Top Bar Coding it is in form.
As you can see that when i use this template in a page i was updating all the forms like this

Code: Select all

update = "@(form)"

the top bar form is also updating . In Mobile Version when i click the Menu or Top Menu , Both of them are not working... As it is anchor tag with

Code: Select all

src ="#"

. when i click those two buttons it adds url with "#" tag

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">


   <div id="layout-topbar" class="ShadowGray">
      <h:form>
         <div id="layout-topbar-indent">
            <a href="dashboard.xhtml"><h:graphicImage name="images/LOGO.svg" styleClass="Fleft" library="spark-layout" id="logo" class="Fleft" /></a>
            <a href="#" id="mobile-menu-button" class="BordRad3 white ShowOnMobile"><i class="fa fa-bars"></i> Menu</a>
            <a href="#" id="mobile-menu-button-gray" class="BordRad3 white ShowOnMobile" ><i class="fa fa-caret-down"></i> Top Menu</a>



            <ul id="layout-topbar-menu">
               <li><p:commandLink styleClass="Animated05 a CursPointer" actionListener="#{generalImages.goLogin}" style="text-decoration:none;">
                     <i class="fa fa-sign-out"></i>Logout </p:commandLink></li>
               <li class="fa fa-ellipsis-v menu-separator"></li>
               <li><p:commandLink styleClass="Animated05 a CursPointer" actionListener="#{generalImages.goHome}" style="text-decoration:none;">
                     <i class="fa fa-home"></i> Home</p:commandLink></li>
               <li class="fa fa-ellipsis-v menu-separator"></li>
               <li><a class="Animated05 CursPointer"> <i class="fa fa-user blue"> </i> #{loginBean.username.toUpperCase()} , Welcome <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a></li>
            </ul>
         </div>
      </h:form>
   </div>
</ui:composition>

[mert.sincan]

Thanks for the sample. I think you need to change layout.js.
Please use;

Code: Select all

this.menubar.find('li').off('clickOff.menubar').on('clickOff.menubar',function() {
    //code here
});

...

this.topmenu.find('li').off('clickOff.topmenu').on('clickOff.topmenu',function() {
    //code here
});

instead of

Code: Select all

this.menubar.find('li').clickOff(function() {
   //code here
});

...

this.topmenu.find('li').clickOff(function() {
   //code here
});

And add oncomplete="Spark.init();" in button;
Exp;
<p:commandButton value="Update" update="@(form)" oncomplete="Spark.init();" />

[xbashtech]

Thanks Aragorn for your kind help it works

Thanks for the sample. I think you need to change layout.js.
Please use;

Code: Select all

this.menubar.find('li').off('clickOff.menubar').on('clickOff.menubar',function() {
    //code here
});

...

this.topmenu.find('li').off('clickOff.topmenu').on('clickOff.topmenu',function() {
    //code here
});

instead of

Code: Select all

this.menubar.find('li').clickOff(function() {
   //code here
});

...

this.topmenu.find('li').clickOff(function() {
   //code here
});

And add oncomplete="Spark.init();" in button;
Exp;
<p:commandButton value="Update" update="@(form)" oncomplete="Spark.init();" />

[mert.sincan]

Glad to hear, thanks!