I want to use omnifaces push notification which is already working for me.
The only problem is that the container is not updating as soon I got a push notification. Only with a page refresh.
I would like tu update my bell icon:
Bell Icon
Here my code with the strucuture...
Code
Here my code JSF:
<h:form id="notificationPushTopbarForm">
<o:socket channel="notificationChannel"
user="#{loginBean.currentEmployee.id}" scope="view"
onmessage="someTestScript">
</o:socket>
<o:commandScript name="someTestScript"
actionListener="#{numberOfUnreadNotificationByEmployeeNotLazyController.findNumberOfUnreadNotification()}"
immediate="true" render="#parent:topbar_container, :notificationTopbarForm" />
</h:form>
<h:panelGroup id="topbar_container" styleClass="topbar" layout="block">
<ul class="topbar-menu">
<li><p:commandLink id="notificationLink" global="true"
update=":notificationTopbarForm" resetValues="true"
oncomplete="PF('notificationSidebar').show()" ajax="true"
process="#this">
<i class="topbar-icon fa fa-fw fa-bell-o"></i>
<h:outputText id="notificationTopbar"
value="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf}"
rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf != 0}"
styleClass="topbar-badge animated FontBold rubberBand" />
<h:outputText value="Benachrichtungen"
styleClass="topbar-item-name" />
</p:commandLink> <p:tooltip for="notificationLink" value="Benachrichtungen"
position="bottom" /></li>
Any idea what I´m doing wrong
Change the update attribute to the following:
render=":topbar_container :notificationTopbarForm"
Related
I am designing a page technology using jsf 2.0 and primefaces. In my page I insert a prime faces calendar. When the user click on calendar to change the default date, a warning message shown which is a dialog box containing two command button. Now what I am trying to do is when the user click on cancel command button, the date should be changed back to the default date which was populated from the first time page when the page loaded. I wrote a java script but its not working.
<label>Date<label>
<p:calendar readonlyInput="true" widgetVar="calDate" yearRange="c-20:c+20" navigator="true" id="b1incomeeffectfrom#{incmStatus.index}" value="#{userDate.effectiveFrom}" pattern="dd/mm/yyyy">
<p:ajax event="dateSelect" oncomplete="checkForDefault(this);" global="false"/>
</p:calendar>
<p:dialog rendered="#{user.Lock}" widgetVar="dlg1" header="Warning" modal="true">
<h:panelGroup layout="block" styleClass="modal-dialog">
<h:panelGroup layout="block" styleClass="modal-content">
<h:panelGroup layout="block" styleClass="modal-body">
<div class="form-horizontal">
<h:panelGroup layout="block" styleClass="form-group">
<h:outputLabel styleClass="col-xs-8 control-label">Are you sure want to change?</h:outputLabel>
</h:panelGroup>
</div>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="modal-footer">
<p:commandButton value="Ok" type="button" styleClass="btn btn-primary" onclick="PF('dlg1').hide();PF('dlg2').show();" />
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary" onclick="resetDate();" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:dialog>
javascript
function resetDate(){
PF('dlg1').hide();
calDate.setDate(null);
}
Your calendar value is coming from your backing bean (userDate.effectiveFrom). You will have to change the value there to take effect
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary"
onsuccess="PF('dlg1').hide()" action="#{userDate.resetDate()}" update="calDate" />
class UserDate{
[..]
public void resetDate(){
this.effectiveFrom = initialDate;
}
[..]
}
I am trying to put a p:commandButton inside a overlayPanel, to submit the information of a h:form and redirect to another view. So, I use the property action of the button to perform this operation. I have a managed bean associated with this view but the function used for this purpose is never reached. Can u help me?
Here is the code:
advancedSearch-form.xhtml
<h:form>
<h:panelGrid width="100%">
<h:column>
....
</h:column>
....
<p:commandButton value="Submit" action="#{searchForm.save}">
</p:commandButton>
</h:panelGrid>
In another xhtml:
<h:form>
<div>
...
<div class="menu-search">
<p:commandButton id="advancedSearch" icon="ui-icon-carat-1-s" styleClass="ui-search-button" type="button"/>
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true" dismissable="false">
<ui:include src="/search/advancedSearch-form.xhtml"/>
</p:overlayPanel>
</div>
...
</div>
After looking over the properties of overlay, I solved this question by removing the dynamic property of overlaypanel.
Action listener that calls function vcardController.renderModify doesn't fire (in the function renderModify I set the variable renderHiddenEdit to true) and the panel in editCardForm doesn't render. Somebody can help me?
<h:form id="editCardForm">
<p:panel id="editCard" style="">
<p:panel rendered="#{vcardController.renderHiddenEdit}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:graphicImage alt="" style="width: 3em;" class="imagesearch" url="#{resource['img:user.svg']}"/>
</p:panel>
</p:panel>
</h:form>
<h:form id="viewCardForm">
<p:panel id="viewCard" style="">
<p:panel rendered="#{vcardController.renderHidden}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<p:commandButton
id="testmodifica"
class="mod nocorner modifycard"
value="modify"
update=":editCardForm"
actionListener="#{vcardController.renderModify}" />
</p:panel>
</p:panel>
</h:form>
<h:form id="formReqEdit" class="formReqEdit" style="display: none;">
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<p:commandButton
id="requestForm"
style="display: none;"
update=":viewCardForm"
oncomplete="contactsDOMAction.showCard(xhr, status, args)"
actionListener="#{vcardController.activateModifyCard}" />
</h:form>
If you want render "editCardForm" you must put "editCardForm" in update parameter in command button
Good practice is add "process". Then you are sure what data from components will be send to bean, in your case process="#this" if you want only call action listener.
Rafa Hernández says right, how you want press button if it has display:none?
I have two p:ouputPanels which have the rendered attribute. They should be rendered when the value of the underlying getter/setter changes. However, the underlying values change in the right order. The first panel disappears, However the second panel does not show up. Even NOT in the HTML code!
My two panels:
<p:outputPanel id="PanelParent">
<h:form>
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
<h:commandButton value="Button"
action="#{PageService.persist}"
styleClass="btn btn-primary opal_btn submit_form_new" />
</h:form>
</p:outputPanel>
<p:outputPanel id="PanelMessage" rendered="#{PageService.isVisibilityMessage()}">
//Message
</p:outputPanel>
</p:outputPanel>
I appreciate your answer!!!
-UPDATE-
In the code, I reference to the persist method and in this method I change the getter and setter of the visibility for each section.
-UPDATE1-
OK here is in fact my code:
<p:outputPanel id="parentPanel">
<p:outputPanel id="PanelForm"
rendered="#{PageService.isVisibilityForm()}">
<div>
<div>
<h:form class="homepage_invitee_form" action="" method="POST">
<p:messages id="messages" showDetail="false" autoUpdate="true"
closable="true" />
<h:inputText required="true"
value="#{PageService.instance.name}"
name="name" placeholder="Last Name"
styleClass="lastname_new" id="lastname_new"
type="text placeholder" />
<h:commandButton value="Press"
action="#{PageService.persist()}"/>
<f:ajax render="" />
</h:commandButton>
</h:form>
</div>
</div>
</p:outputPanel>
<p:outputPanel id="PanelThank"
rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
I really do not see where it fails? ;(
It's like Xtreme Biker said <f:ajax> render attribute will render elements that are already present in the DOM. In your case, <p:outputPanel id="PanelThank"> render attribute was evaluating to false so it was not in the DOM. Therefore, <f:ajax> could not render it. You need to point to something that is always visible. Change
<f:ajax render="" />
to
<f:ajax render=":PanelThank" />
but more importantly change
<p:outputPanel id="PanelThank" rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
to
<p:outputPanel id="PanelThank">
<p:outputPanel rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
Consider refactoring your code also. For instance, action and method in <h:form> is not needed.
rendered attribute defines if JSF will render your component in the DOM tree. Your problem is you cannot update a component which is not in the tree because you simply don't have it:
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
<!--Fails if not PageService.isVisibilityForm(), because you don't have the component itself in the tree! So can't find it-->
<p:ajax update="PanelForm"/>
Your best is to wrap your content in another container which is always rendered and update it instead of the other one:
<h:panelGroup id="updatablePanel">
<p:outputPanel rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
</h:panelGroup>
<p:ajax update="updatablePanel"/>
I am using <p:graphicImage> like below:
<div id="mapp">
<h3>Country Map</h3>
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</div>
But this is not a clickable image. How can I make this image clickable so when user click on it, I can invoke the managed bean action that I want.
Wrap your image in a h:commandLink / h:link:
<h:commandLink action="...">
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</h:commandLink>
If the p:graphicImage is inside a p:contentFlow, you can use the following:
For me, this works perfectly:
<h:form id="imageFlowForm">
<p:contentFlow id="imageContent" value="#{controller.allImages}" var="entry">
<div class="caption">#{entry.name}</div>
<p:commandLink styleClass="content" action="#{controller.doAction}" update="detailForm">
<p:graphicImage value="#{entry.imagePreviewUrl}" styleClass="content" width="50px" />
<f:param name="id" value="#{entry.id}" />
</p:commandLink>
</p:contentFlow>
</h:form>