i am using JSF 2.1 primefaces 3.5
i have p:datatable on every row i have edit - delete commandLink, on delete h:commandLink i have used p:confirmDialog when i click delete h:commandLink confirmDialog popup, if i press yes commandButton action method is not invoking..
but if i put p:confirmDialog code out the form method is invoking can't understand what happening
<h:body>
<p>hello</p>
<ui:composition template="/template/mastertemplate.xhtml">
<ui:define name="content">
<f:view>
<div id="main">
<div class="full_w" style="height: auto; max-width: 1150px; overflow: hidden;">
<!-- <div class="full_w" style="height: auto; max-width: 1045px; overflow: hidden;"> -->
<div class="h_title"><p class="h_titleParagraph" style="margin: 0px;">Head of accounts</p></div>
<h:form styleClass="form" id="headOfAccountsForm">
<!-- <p:panel id="analysisTheBudgetPenel" header="Analysis The Budget"> -->
<div class="divPanel">
<div class="divContent">
<div>
<p:tabView id="headOfAccountsId_tabview">
<p:tab title="Main Head Of Accounts" id="mainHeadOfAccountsId_tab">
<p:dataTable id="allMainHeadOfAccountsId_table" value="#{budgetHeadOfAccountsAction.budgetMainHeadOfAccountsBean.budgetMainHeadOfAccountsListBean}" var="budgetMainHeadOfAccountsList" rowIndexVar="allMainHeadOfAccounts_rowIndex">
//some columns
<p:column headerText="Edit">
<h:commandLink id="deleteId_commandLink" value="delete" onclick="confirmation_widgetVar.show(); return false;" />
</p:column>
</p:dataTable>
<p:confirmDialog header="Confirmation" message="Do you want to delete this row?" widgetVar="confirmation_widgetVar">
<p:commandButton actionListener="#{budgetHeadOfAccountsAction.deleteMainHeadOfAccountsOnAjax}" value="Yes" oncomplete="confirmation_widgetVar.hide();">
<f:setPropertyActionListener target="#{budgetMainHeadOfAccountsBean.budgetMainHeadOfAccountIdBean}" value="#{budgetMainHeadOfAccountsList.budgetMainHeadOfAccountIdBean}" />
</p:commandButton>
<p:commandButton value="No" onclick="confirmation_widgetVar.hide()" type="button" />
</p:confirmDialog>
// all others closing tags..
Just try to use process attribute like
<p:commandButton style="position:absolute;right:-150px;" process="#this"
and let me know
Related
I've checked all PrimeFaces 6.x documentation and online as well on p:panel + facet "options" + p:menu and have tried facet "actions"/"header" along with "options", but I can't seem to either change the icon to the right of a p:panel with a facet "options" + p:menu or to set a css class to its generated anchor link.
Does anyone know how to apply either of those?
Screenshot #1:
Generated code:
<div id="myForm:formPanel" class="ui-panel ui-widget ui-widget-content ui-corner-all templateWidgetPanel" data-widget="widget_myForm_formPanel">
<div id="myForm:formPanel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Menu Test</span>
<a id="myForm:formPanel_menu" href="#" class="ui-panel-titlebar-icon ui-corner-all ui-state-default" title="Edit...">
<span class="ui-icon ui-icon-gear"></span>
</a>
</div>
<div id="myForm:formPanel_content" class="ui-panel-content ui-widget-content">Hola!</div>
</div>
Source code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Panel Menu Icon</title>
</h:head>
<h:body>
<h:form id="myForm" style="width: 30%">
<p:panel header="Menu Test"
id="formPanel"
menuTitle="Edit..."
styleClass="templateWidgetPanel" >
<f:facet name="options">
<p:menu id="formPanelMenu" styleClass="templateWidgetMenu">
<p:submenu label="Options.." styleClass="templateWidgetSubMenu">
<p:menuitem value="Menu #1"
styleClass="templateWidgetSubMenuConfigure"
target="_top"
outcome="index.xhtml"
icon="ui-icon-settings"/>
<p:menuitem value="Menu #2"
styleClass="templateWidgetSubMenuConfigure"
target="_top"
outcome="index.xhtml"
icon="ui-icon-settings"/>
</p:submenu>
</p:menu>
</f:facet>
Hola!
</p:panel>
</h:form>
</h:body>
</html>
You could start by creating the right selector that disables the default icon (it most likely includes .ui-icon.ui-icon-gear in it) and then in this selector set a different icon. Yes, it is (ab)using the ui-icon-gear class for this case, but it works
.templateWidgetPanel .ui-icon-gear {
background-position: -224px -112px;
}
The css (all basic css, nothing PF specific) above changes it into a 'star' However...
PrimeFaces panel also has the option to add custom actions to the panel (from the same showcase):
<p:panel id="custom" header="Custom Actions" style="margin-bottom:20px">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years..." />
</h:panelGrid>
<f:facet name="actions">
<h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</h:commandLink>
<h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-star" />
</h:commandLink>
</f:facet>
</p:panel>
In which you can declare your own components and icons (star and help in the example above)
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'm trying to offer some content dynamically, that is without dedicated pages, with the help of buttons. The aforementioned content is correctly loaded, but it's not working.
The layout is like this:
<p:outputPanel style="width: 100%; height: 100%; overflow: auto;" id="contentPanel">
<c:choose>
<c:when test="#{empty requestComposition}">
<ui:insert name="body">Content</ui:insert>
</c:when>
<c:otherwise>
<ui:include src="#{requestComposition}" />
</c:otherwise>
</c:choose>
</p:outputPanel>
The button to load content is like this (inside another outputPanel):
<p:commandButton value="Load Dynamic" update=":contentPanel" actionListener="#{applicationController.processActionButton('/dynamic')}" />
The action listener is like this:
public void processActionButton(String target){
if(target == null || target.isEmpty()){
return;
}
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest req = (HttpServletRequest)context.getExternalContext().getRequest();
req.setAttribute("requestComposition", "/WEB-INF/templates" + target + ".xhtml");
}
The dynamic.xhtml is like this:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:outputPanel style="width: 100%; padding-top: 20px;">
<p:outputPanel style="width: 60%; margin: 0 auto;">
<p:outputPanel style="text-align: center; color: gold; font-weight: bold;">Dynamic</p:outputPanel>
<p:messages id="messages" />
<h:form>
<p:panelGrid columns="2" style="width: 100%;">
<p:outputLabel value="Item" for="idItem" />
<p:outputPanel style="display: block; padding-right: 10px;" layout="inline">
<p:inputText value="#{bean.item}" id="idItem" style="width: 100%;" required="true" />
</p:outputPanel>
</p:panelGrid>
<p:outputPanel style="text-align: center;">
<p:commandButton value="Process" style="margin: 5px;" update=":growl" onclick="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.disable()" oncomplete="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.enable()" actionListener="#{applicationController.dummyAction}" />
<p:commandButton value="Dummy" style="margin: 5px;" update=":growl" actionListener="#{applicationController.dummyAction}" process="#this" />
</p:outputPanel>
</h:form>
</p:outputPanel>
</p:outputPanel>
</ui:composition>
When any of the buttons is clicked the form apparently submits, but the action listener is not executed.
When dynamic.xhtml is loaded as page content the form submits, but the action listener is triggered only for the second button (labelled Dummy), because of process #this, in which case the form is no longer submitted. I can workaround the form not submitting with process#this by adding onchange to input elements, but I failed to understand why is not working when it is loaded dynamically.
Thank you
I have to apologize to BalusC, since the answer he suggested was actually correct. I was tricked by the #PostConstruct which performed an unnecessary initialization for me, but the key is to use a #ViewScoped bean. That however raises another question, since it is stated in the documentation that by default there will be maximum 20 such objects stored in the server, which can be configured to a different value, but if I understood correctly that would mean that the 21st connection to the server will result in reusing the first one, so the new connection will access data not meant for it, or in discarding it and creating a new one, which means the first will lose its data?
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 getting the following Error:
Cannot find component with identifier "myForm:display" referenced from "myForm_j_idt32".
my xhtml File :
<div id="divScreen" align="center">
<div id="divPage">
<ui:insert>
<ui:include src="/banner.xhtml"></ui:include>
</ui:insert>
<h:form id="menuBarForm">
<div id="menubar_link">
<p:commandLink value="Home" action="#{loginAct.homeNavigation}" style="color: #ffffff;margin-left: 10px;" ajax="false"></p:commandLink>
<p:commandLink action="#{loginAct.dologout}" style="color: #ffffff;margin-left: 10px;" value="Logout" ajax="false"></p:commandLink>
</div>
</h:form>
<div id="divMnuAndFrm">
<div id="divMnuContnr">
<h:form id="menuForm">
<p:menu style="width: 94%;" model="#{authMenuModel.model}"></p:menu>
</h:form>
</div>
<div id="divFrmContnrwithmenu">
<div style="height: 400px; margin: 10px 0px 0px 0px;width: 100%;">
<h:form id="myForm">
<p:dataTable
var="filem"
value="#{fileViewManagementPnation.data}"
rowKey="#{filem.ftype}"
paginator="true" rows="10"
selection="#{fileViewManagementPnation.selectedFile}"
selectionMode="single"
emptyMessage="No Files Found"
>
<p:ajax event="rowSelect" update="myForm:display" oncomplete="fileDialog.show()"/>
<f:facet name="header">
:: File Management ::
</f:facet>
<p:column sortBy="#{filem.ftype}" filterBy="#{filem.ftype}" headerText="FileType">
#{filem.ftype}
</p:column>
<p:column headerText="Version" sortBy="#{filem.version}">
#{filem.version}
</p:column>
<p:column headerText="Size">
#{filem.fsize}
</p:column>
<p:column headerText="File">
Action
</p:column>
</p:dataTable>
<p:dialog header="File Details" widgetVar="fileDialog" resizable="false" width="400"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header_det">
<p:graphicImage value="/images/gep_logo.gif" />
</f:facet>
<h:outputText value="File Name : " />
<h:outputText value="#{fileViewManagementPnation.selectedFile.ftype}" id="ftype"/>
<h:outputText value="Size" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.fsize}" id="size"/>
<h:outputText value="File Type :" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.version}" id="version"/>
</h:panelGrid>
</p:dialog>
</h:form>
</div>
</div>
</div>
<div id="divFooter">
<p>Developed and Maintained by National Informatics Centre</p>
</div>
</div>
I am trying last two weeks to make it work but still am not getting any answers.
Please kindly help me in this issue.
You should be able to use update=":myForm:display" or update="display" instead of update="myForm:display".
Take a look at NamingContainer in JSF2/Primefaces, it'll give you a bit more background information. It's because myForm:display refers to nested NamingContainer within myForm which is called myForm, but you don't have that. The component you want to update is directly witin the same NamingContainer, namely myForm. So simply call one of the above mentioned and you should be fine.
You are not calling the right component.
You are calling a component withing the same form.
calling myForm:display will look for a component with id myForm inside the current form myForm as in :myForm:myForm:display which you do not have.
So you do not need to specify the full qualified name of the form. You can use the id of the component directly as in:
Both components (the calling component, and the called component) are inside the same form so use: update="display"
So instead you can either call the component directly as in the example above, or call it using its full qualified name update =":myForm:display"