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>
Related
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"
This is the main view which contains the draggable items. In this view I have a ui:include for including a UI fragment that also has the drop area.
mainView.xhtml
<p:dataList id="outerList" var="varOuter" value="#{myVO.getOuterList()}">
<div>
<span>#{varOuter.someVal}</span>
</div>
<p:dataList id="innerList" var="innerVar" value="#{myVO.getInnerList()}">
<div class="crew-list">
<h:form>
<h:panelGroup id="draggableItem" layout="block">
<span>#{innerVar.someVal}</span>
</h:panelGroup>
<p:draggable for="draggableItem" opacity="0.5" scope="ab"
revert="true" helper="clone" appendTo="#(body)" zindex="4" >
</p:draggable>
</h:form>
</div>
</p:dataList>
</p:dataList>
...
<ui:include src="fragment.xhtml">
<ui:param name="param" value="#{paramVal}" />
</ui:include>
fragment.xhtml
<p:dataList id="list" var="pos" value="#{myVO.getPositions()}" rowIndexVar="rowIndex">
<ui:fragment rendered="#{!pos.isFilled()}">
<h:panelGroup layout="block" id="dropArea">
<span>Drop Here</span>
</h:panelGroup>
<p:droppable for="dropArea" hoverStyleClass="active"
scope="ab" datasource=":outerList:innerList">
<p:ajax listener="#{crewChangeVO.onDrop}" update="list" />
<f:attribute name="index" value="#{rowIndex}" />
</p:droppable>
</ui:fragment>
</p:dataList>
Now the problem that I run into is that, I am unable to map the datasource on the droparea correctly. Without datasource the drag-drop works but I don't get the data (dragged object) in my bean method and I need a way to know which object was dragged.
Would appriciate any input on how to achive this functionality.
Update
Using a single(non-nested) dataList as the source with a form outside it works. But the problem is that it doesn't work for a nested list. So, for now I am proceeding with design changes and removing the nested list.
I'm sure this a duplicate but what I found here and elsewhere on the net just didn't work for me.
Whatever I do, the images in the following code are aligned vertically, but I want them horizontally.
<script>
var aa = "src='images/img?r=' + Math.random()"
var bb = "src='images/trans?x=' + Math.random()"
</script>
<hr />
<h:panelGroup layout="horizontal">
<h:form>
<h:commandLink>
<h:graphicImage width="100" id="img1"
value="images/img?r=1#{Math.random()}" alt="not found">
</h:graphicImage>
<f:ajax render="#this :pg2"></f:ajax>
</h:commandLink>
</h:form>
<h:form id="pg2">
<h:graphicImage width="100" id="img2"
value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
</h:graphicImage>
</h:form>
</h:panelGroup>
<h:messages></h:messages>
<hr />
(And don't get confused about that #{Math.random()}. It works just because I have a bean called "Math".)
I'm using tomcat 8 and jsf version 2.2.8.
Can you try this
<h:panelGrid columns="2" width="210px" columnClasses="small, small">
<h:panelGroup id="a1">
<h:form>
<h:commandLink>
<h:graphicImage width="100" id="img1"
value="images/img?r=1#{Math.random()}" alt="not found">
</h:graphicImage>
<f:ajax render="#this :pg2"></f:ajax>
</h:commandLink>
</h:form>
</h:panelGroup>
<h:panelGroup id="b1">
<h:form id="pg2">
<h:graphicImage width="100" id="img2"
value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
</h:graphicImage>
</h:form>
</h:panelGroup>
</h:panelGrid>
with CSS:
.small{
width:102px;
vertical-align: text-top;
}
Let us know
Edit. changed div to panelGroup
try to add display: inline-block style to the second form
as you see in here the images need to be inside divs which contain this css
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 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>