I have the following menu where all menuItem are starting different views that use FlowScope.
In my home page ex: "http://localhost:8080/abc" I can Start any flow from the MenuItem. But when I get into one flow, I get the error: Could not resolve NavigationCase for outcome: view-all
If I change from outcome to action in the menuItem, I can get into the view, but if I try to start another follow I cant.
Here is my menu :
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header">
<h:form>
<p:menubar id="menu">
<p:menuitem>
<h:link>
<h:graphicImage name="fme.png" height="50" />
</h:link>
</p:menuitem>
<p:submenu label="Colaborador" icon="ui-icon-document">
<p:menuitem value="Criar Colaborador" action="create-colaborator" />
<p:menuitem value="Editar Colaborador" action="create-colaborator" />
<p:menuitem value="Listar Todos" action="view-all" />
</p:submenu>
<p:submenu label="Relatorio" icon="ui-icon-document">
<p:menuitem value="Relatorio" action="exportar-relatorio" />
</p:submenu>
<p:menuitem style="margin-right:600px">
<h:link>
<h:graphicImage name="swiss.png" height="40" />
</h:link>
</p:menuitem>
</p:menubar>
</h:form>
</ui:insert>
</div>
<div id="contentWrap" class="ui-fluid">
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="footer">
<ui:insert name="footer">
Um produto de FME em parceria com a SwissContact.
</ui:insert>
</div>
</div>
</h:body>
Related
I use PanelMenu to build menu and the target is an iframe.
What I want to get, when I click menuItem in panelMenu, the result should display in iframe.
What I get, the result display in same windows, like "_self".
I tried use an other menu component, like slideMenu and tieredMenu, it display in target iframe, like what I want.
Is this a bug in panelMenu or may be I use in wrong way?
panelMenu code:
<h:form id="menuForm">
<p:panelMenu id="appSlideMenu" autoDisplay="false" toggleEvent="click" style="width:250px">
<p:submenu label="Homepage">
<p:menuitem value="Primefaces" url="http://www.primefaces.org" target="dcontainer" />
</p:submenu>
</p:panelMenu>
</h:form>
slideMenu code:
<h:form id="menuForm">
<p:slideMenu id="appSlideMenu" autoDisplay="false" toggleEvent="click" style="width:250px">
<p:submenu label="Homepage">
<p:menuitem value="Primefaces" url="http://www.primefaces.org" target="dcontainer" />
</p:submenu>
</p:slideMenu>
</h:form>
iframe code:
<h:body>
<div class="row-container">
<div class="first-row">
<div class="start-button">
<p:commandButton icon="fa fa-arrow-right" value="Start"
oncomplete="PF('nsidebar').show()" />
</div>
<div class="bottom">
<ui:include src="bottom.xhtml" />
</div>
</div>
<div class="second-row">
<iframe id="dcontainer" name="dcontainer"> </iframe>
</div>
</div>
<p:sidebar widgetVar="nsidebar" style="width:300px;">
<ui:include src="menu.xhtml" />
</p:sidebar>
</h:body>
Please help... Thank you...
Primeface 7.0 Community
Tomcat 9.0.6
Here is my view
<h:body>
<div id="header"></div>
<div id="upload">
<h:form id="frmMain" enctype="multipart/form-data">
<p:inputTextarea id="text" style="width: 99%" value="#{uploadfile.content}" placeholder="What are you thinking?"></p:inputTextarea>
<p:fileUpload auto="true" oncomplete="input()" id="fileIdPhoto" previewWidth="200" style="width: 100%" messageTemplate="{name}" fileUploadListener="#{uploadfile.upload}" mode="advanced" dragDropSupport="true"
multiple="true" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:messages id="messages" autoUpdate="true" closable="true" />
<p:menubar autoDisplay="false">
<p:menuitem />
<f:facet name="options">
<p:commandButton value="Publish" update="fileIdPhoto" icon="ui-icon-extlink" actionListener="#{uploadfile.uploadPhoto}">
</p:commandButton>
</f:facet>
</p:menubar>
</h:form>
</div>
<div id="body">
<div id="post_container">
<ul>
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form">
<li>
<div id="post">
<p:commandButton rendered="false" id="dynaButton" process="#this,form" value="Show" type="button" icon="ui-icon-extlink"/> cant not trigger it so I set render false
<p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:submenu label="Ajax">
<p:menuitem value="Delete" icon="ui-icon-disk"/>
<p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
</p:menu>
<b>#{value.content}</b> <br/>
#{value.createtime} <br/>
<br />
<p:galleria value="#{image.getImgByID(value.id)}" rendered="#{not empty image.getImgByID(value.id)}" var="a" panelWidth="720" panelHeight="400" showCaption="true">
<h:graphicImage value="data:image/jpeg;base64,#{a.imgUrl}" style="width:100%;height:100% " alt="Image Description for #{a.imgName}" title="#{a.imgName}"/>
</p:galleria>
<p:rating value="#{value.rating}" stars="10" cancel="false"/>cant change those stars by clicking on it
</div>
<div id="post_ceperator"/>
</li>
</h:form>
</ui:repeat>
</ul>
</div>
</div>
</h:body>
What I am trying to do is change the value of p:rating tag and p:menu to trigger but its seem like my page is only submitting the first form. Also how can I submit a post and div that contains my post will automatically update?
In my opinion the problem is that your components inside of the ui:repeat have all the time the same id's for each iteration.
The way i used to define ids in loops like that was to add some sort of unique prefix or suffix to them based on some field of the data over which i am iterating:
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form_#{value.id}">
<li>
<div id="post_#{value.id}">
Now each of your components, including the form, which is highly likely to be the cause of your problem, will have its unique id for each of the loop repetition.
I have a page 'report1.xhtml'and 'report2.xhtml'both of which is using the same template 'template.xhtml'.
Here's 'template.xhtml':
<pe:layout fullPage="true" id="collapsibleLayoutPanel" stateCookie="false" widgetVar="templateLayoutWidget" style="100%;">
<pe:layoutPane id="topPanel" styleClassContent="topPanel unhideMenus" position="north" resizable="false"
closable="false" spacingClosed="0" spacingOpen="0">
<p:outputPanel id="dg">
<p:outputPanel id="dMHeader" styleClass="A_class Amarks_top">
#{tController.classificationMarking}
</p:outputPanel>
</p:outputPanel>
<div id="Ar" class="Aer" role="banner">
<div id="my_apps" style="display:none;">
<h:outputLink rendered="#{primaryMenuController.renderReturnToMyApps}"
value="#{primaryMenuController.myAppsUrl}">
<img id="my_apps_img" src="#{request.contextPath}/resources/img/my_apps.png" alt="My Apps"
title="My Apps"/>
</h:outputLink>
</div>
<b:navBar brandImg="#{request.contextPath}/resources/img/X_logo.png"
brandHref="#{request.contextPath}/view/landingPage.jsf">
<b:navbarLinks>
<div class="ui-grid-col-6">
<ui:include src="prnu.xhtml"/>
</div>
<div class="ui-grid-col-6">
<div id="A_logout">
<h:form id="helpLogoutForm">
<p:menubar styleClass="Aout_menu" autoDisplay="false">
<p:submenu
label="#{pController.name} (#{pController.accountType})"
icon="primnav-user-acct">
<p:menuitem id="myDashboardLink" value="My Dashboard"
action="landingPage" a:allowRead="true"
icon="primnav-dashboard"/>
<p:menuitem id="myMessagesLink" value="My Messages"
action="userMessageList" a:allowRead="true"
icon="primnav-inbox"/>
<p:menuitem id="myPrefLink" value="My Preferences"
oncomplete="PF('upDialog_widget').show();"
a:allowRead="true" icon="primnav-preferences"/>
<p:separator/>
<p:menuitem id="logoutLink" value="Logout"
action="#{primaryMenuController.logout}"
a:allowRead="true" onclick="X.logoutHandler();"
icon="primnav-logout" ajax="false"/>
</p:submenu>
<p:submenu icon="primnav-help">
<p:menuitem value="Help"
onclick="window.open('#{request.contextPath}/help/default.htm', 'Help', 'height=600,width=850,resizable=yes'); return false;"
icon="primnav-help_menu_child" a:allowReadHelp="true"/>
<p:menuitem value="About"
action="#{aController.updateMemoryValues()}"
oncomplete="PF('aboutDialog_widget').show();"
a:allowRead="true" icon="primnav-help_menu_child"
update=":aboutDialog"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
</div>
</b:navbarLinks>
</b:navBar>
</div>
<ui:insert name="tertiaryNavMenu"/>
</pe:layoutPane>
<!-- Main content -->
<pe:layoutPane id="centerPanel" styleClassContent="centerPanel" position="center" spacingClosed="0"
spacingOpen="0">
<pe:layoutPane position="north" id="nestedTopPanel" size="45" resizable="false" closable="false"
styleClassContent="unhideMenus"
spacingClosed="0" spacingOpen="0" rendered="#{not hideTitleActionBar}">
<div id="A_content" class="AE_content" role="main">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row template-header">
<div class="ui-grid-col-3 template-title">
<div id="A_content_pagetitle" class="AE_content_pagetitle">
<h1 class="pagetitle_h1"><ui:insert name="contentHeader"></ui:insert></h1>
</div>
</div>
<div class="ui-grid-col-9 template-actions">
<div class="action_buttons">
<ui:insert name="actionMenu"></ui:insert>
</div>
</div>
</div>
</div>
</div>
</pe:layoutPane>
<pe:layoutPane position="center" id="nestedCenterPanel" spacingClosed="0" spacingOpen="0">
<div id="A_content_body" class="A_content_body" style="padding:0 12px;">
<p:growl id="siteMessages" globalOnly="true" showDetail="true" life="4000" autoUpdate="false"
widgetVar="siteMessages_widget"
sticky="#{not empty facesContext.maximumSeverity and facesContext.maximumSeverity.ordinal gt 1}"/>
<ui:insert name="content"></ui:insert>
</div>
</pe:layoutPane>
</pe:layoutPane>
<!-- Bottom markings -->
<pe:layoutPane id="bottomPanel" styleClassContent="bottomPanel" position="south" resizable="false"
closable="false" spacingClosed="0" spacingOpen="0">
<!-- TODO: Determine classification marks to display -->
<!-- BEGIN FOOTER -->
<p:outputPanel styleClass="A_classmarking AE_body_classmarks_bottom" id="documentMarkingFooter">
#{tController.classificationMarking}
</p:outputPanel>
<!-- END FOOTER -->
</pe:layoutPane>
</pe:layout>
When I load report1.xhtml and resize window to iPhone size(640x960) everything works as expected and the burger menu onclick is showing the previously hidden menu options. However after the onchange event that causes page forward to report2.xhtml, the burger menu onclick is no longer working.. It's still clickable but nothing happens after clicking it.. If I make the navigation redirect instead of page forward, everything works just fine, so my conclusion is this has something to do with page forward...
After debugging on the devtools console I've got this error showing up after page load(for page forward only):
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
The source js is http://localhost:8080/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.2.7
Then on resize I've got this error from source https://raw.githubusercontent.com/primefaces-extensions/core/master/src/sourcemap/3.2.0/layout.source.js:
Uncaught TypeError: Cannot read property 'state' of undefined
Again, note that those errors only occur when navigation is page forward and goes away when doing a redirect. I don't want to do a redirect because I want the URL to stay the same..
I'm using JSF 2.2 and PrimeFaces 5.2. The content of my layout is not displayed if I use an HTML element inside this layout as you can see in the image below. If I put the HTML element outside of the layout, then everything works.
left: without <h1> element / right: with <h1> element
Did I overlook something or is there a reason for this behavior? I'm quite new to JSF.
Code
content of <h:body>
<h:form style="max-width:1000px; margin-bottom: 20px;">
<p:tabMenu activeIndex="1">
<p:menuitem value="Rechnung" icon="ui-icon-home" url="index.xhtml" />
<p:menuitem value="Bearbeiten" icon="ui-icon-pencil" url="editor.xhtml" />
</p:tabMenu>
</h:form>
<p:layout style="max-width:1000px;">
<p:layoutUnit position="center" style="border: none;">
<p:layout style="border: none;">
<p:layoutUnit position="west" size="250" style="border: none;">
<h:form>
<p:menu>
<p:submenu label="Tabellen">
<!-- some <p:menuitem> -->
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" style="border: none;">
<h1>Testresult</h1> <-- don't work
<p:outputLabel value="test text"/> <-- works
<!-- table -->
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
</p:layout>
When i talked to Cagatay Civici during a JSF class, he recommended us not to use layouts(p or pe) and instead use regular divs to manage layouts. Nested layouts were definitely not recommended.
So our layout page went from
<pe:layout fullPage="true" id="layoutFull">
<pe:layoutPane id="idar758" position="north" closable="false" collapsible="false" size="60"
collapsed="false" resizable="false">
<h:form id="postLoginHeader">
<ui:include src="./loginHeader.xhtml"/>
</h:form>
</pe:layoutPane>
<p:layoutUnit position="center" closable="false" collapsible="false"
collapsed="false" resizable="false" resizeWhileDragging="false"
id="centerLayout">
<div id="idar759" class="slimScrollMyPage1">
<h:panelGrid id="panelGroup_38" columns="1" width="100%">
<p:messages globalOnly="true" autoUpdate="true" id="messages"
rendered="true" closable="true">
<p:effect id="idar760" type="bounce" event="load" delay="500" />
</p:messages>
<ui:insert name="body" id="insert_38" />
</h:panelGrid>
</div>
</p:layoutUnit>
<pe:layoutPane id="idar761" position="west" closable="true" resizable="false"
resizeWhileDragging="false" size="235">
<div id="idar762" class="slimScroll">
<ui:include src="leftMenuAdmin.xhtml" id="include_36" />
</div>
<br />
<p:spacer height="5" />
</pe:layoutPane>
<pe:layoutPane id="idar763" position="south" closable="false" size="30">
<h:panelGroup id="panelGroup_40south">
<ui:include src="./footer.xhtml" />
</h:panelGroup>
</pe:layoutPane>
</pe:layout>
to
<ui:include src="./adminPostLoginHeader.xhtml" />
<div class="container" id="div_23">
<h:panelGrid columns="2" id="panelGrid_34"
columnClasses="layoutColumn1,layoutColumn2">
<h:panelGroup id="panelGroup_35">
<div class="collapsible">
<p:commandButton value=" " />
<div id="idar762" class="slimScroll">
<ui:include src="leftMenuAdmin.xhtml" id="include_36" />
</div>
</div>
</h:panelGroup>
<h:panelGroup id="panelGroup_37" width="100%">
<div id="idar759" class="slimScrollMyPage1 bckgroundDiv"
style="background-image: url(#{serverThemeBean.landingImageUrl}) !important;">
<h:panelGrid id="panelGroup_38" columns="1" width="100%">
<p:messages globalOnly="true" autoUpdate="true" id="messages"
rendered="true" closable="true">
<p:effect id="idar760" type="bounce" event="load" delay="500" />
</p:messages>
<ui:insert name="body" id="insert_38" />
<p style="padding-bottom: 5px;" id="p_39" />
</h:panelGrid>
</div>
</h:panelGroup>
</h:panelGrid>
</div>
<h:panelGroup>
<ui:include src="./adminPostLoginFooter.xhtml" />
</h:panelGroup>
I've message in an xhtml page of course bound with a bean.
Now the messages are in a list, and i'm using ui:repeat to display the message and all that.
Now when i open a message, there's a reply button in the dialogGrid which opens another dialog on the same page,
I just need to pass data to that reply dialog.
In the first place, it's working fine, i mean if you click on the reply button directly it works fine, but when you open the message and then click on reply it doesn't update the dialog.
I've seen this
Pass parameter to dialog in the same page
But MY BEAN IS REQUEST SCOPED
Here's my xhtml code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Styles/homepage-style.css" />
<link rel="stylesheet" type="text/css" href="../Styles/profile.css" />
<title>Shadi Bandhan | We find the best match for you</title>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="main-content">
<p:growl autoUpdate="true" />
<div id="left-pane">
<div id="profile-info-area">
<ui:insert name="profile_info_area" >
<ui:include src="profileInfoArea.xhtml" />
</ui:insert>
</div>
<div id="home-main-area">
<div id="messages-wrapper">
<div id="messages-header">
<div id="m-heading">
Messages - Inbox
</div>
<div id="m-search">
<div id="searchbox">
Search Messages <input type="text" value="Search" />
</div>
<div id="newmessage">
+ New Message
</div>
</div>
</div>
<h:form id="messagesForm">
<div id="messages">
<p:dialog id="messagesDialog" modal="true" widgetVar="messageDialog" resizable="false" width="750" height="300" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid">
<p:column>
<h:outputLabel for="msgRecepient" value="To"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="300" id="msgContents" value="#{messagesManagedBean.msg.message}" cols="65" rows="3" >
<p:watermark for="msgContents" value="#{userMsg.userId}" />
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton id="msgSend" value="Send" action="#{messagesManagedBean.sendMessage('reply')}" oncomplete="messageDialog.hide()" >
<f:param value="#{userMsg.userId}" name="messageSenderId" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<p:dialog id="messagesDialog2" modal="true" widgetVar="messageDialog2" resizable="false" width="750" height="300" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid2">
<p:column>
<h:outputLabel for="msgRecepient2" value="From"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient2" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents2" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea readonly="true" id="msgContents2" value="#{userMsg.message}" cols="65" rows="3" >
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton styleClass="reply-btn" value="Reply" update=":messagesForm:dialogGrid"
oncomplete="messageDialog.show(), messageDialog2.hide()">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div id="message">
<div id="senderImg">
<img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
</div>
<div id="message-txt-area">
<div id="senderName">
<p:commandLink styleClass="senderName" value="#{userMsg.userFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userMsg.userId)}"></p:commandLink>
</div>
<ui:fragment rendered="#{userMsg.isRead}">
<div id="message-txt">
#{userMsg.message}
</div>
</ui:fragment>
<ui:fragment rendered="#{not userMsg.isRead}">
<div id="message-txt" class="msgNotRead">
#{userMsg.message}
</div>
</ui:fragment>
<div id="msgAction">
<p:commandLink styleClass="reply-btn"
value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
<ui:fragment rendered="#{userMsg.isRead}">
<p:commandLink styleClass="open-btn" value="Open"
oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</ui:fragment>
<ui:fragment rendered="#{not userMsg.isRead}">
<p:commandLink styleClass="open-btn" value="Open"
action="#{messagesManagedBean.messageOpenedListener(userMsg.messageId)}"
oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</ui:fragment>
</div>
</div>
</div>
</ui:repeat>
<h:commandButton value="< prev" action="#{messagesManagedBean.paginator1.prev}"/>
<h:outputText value="#{messagesManagedBean.paginator1.pageIndex} / #{messagesManagedBean.paginator1.pages}"/>
<h:commandButton value="next >" action="#{messagesManagedBean.paginator1.next}"/>
<h:inputHidden value="#{messagesManagedBean.paginator1.pageIndex}"/>
</div>
</h:form>
</div>
</div>
</div>
<div id="right-pane">
<ui:insert name="right-pane" >
<ui:include src="right-pane.xhtml" />
</ui:insert>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>