I use this code:
<p:panel header="Advanced User Data" toggleable="true" toggleOrientation="horizontal" collapsed="true">
some other stuff...
</p:panel>
Is there an attribute with which I can set the title when th panel is closed like this:
example
There is no attribute like this AFAIK. You could bind the value of collapsed attribute to a managed bean and add an AJAX listener on toggle event:
<p:panel header="Advanced User Data" toggleable="true"
toggleOrientation="horizontal" collapsed="#{myBean.booleanVal}" style="display: inline-block;">
<p:ajax event="toggle" process="#this" update="pnlAlternativeTitle" />
</p:panel>
<h:panelGroup id="pnlAlternativeTitle">
<h:outputText rendered="#{myBean.booleanVal}"
value="Alternative title" />
</h:panelGroup>
Related
I currently have an .xhtml that shows a pop up depending on some events in JAVA, now i need that if the pop up shows put the focus on a expecific textfield.
JAVA
public void validate(){
if(List.size()>0){
String [] codes = {"1","97","119","606","695","700","738","730"};
List<String> codesList = Arrays.asList(codes);
String coomentsString ="THIS IS A STRING";
if(codesList.contains(List.get(0).getCode())){
MessageUtil.addInfoMessage(LabelKeys.DOCBR_INFO,coomentsString);
PrimefacesUtil.showMessage();
}
}
}
XHTML
<p:commandButton id="loadPage" action="#CLASS.validate}"/>
<p:inputText id="comments"/>
<script type="text/javascript">
$( document ).ready(function() {
var name= document.getElementById('containerForm:loadPage');
name.click();
});
</script>
XHTML POP UP
<p:dialog id="growl" widgetVar="messagePopupWidget" resizable="false"
modal="true" width="270px" styleClass="messagedialog">
<p:ajax event="close" update="growl"
listener="#{messageDialog.handleCloseDialogMessageEvent}" />
<p:panelGrid style="width:100%;">
<p:row>
<p:column style="text-align:left;">
<p:messages showSummary="true" showDetail="true"
autoUpdate="false" escape="false"/>
</p:column>
</p:row>
<p:row>
<p:column style="text-align:center;">
<p:commandButton id="messageDialogButtonId" value="#{label['messageDialog.btn.ok']}" onclick="messagePopupWidget.hide();" update="growl" type="button"/>
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
now, i need that after loadPage makes the click on javascript and shows the pop up from validate(), put the cursor on "comments"
Two ways to achieve this with primefaces:
1. Include this in your dialog to set explicit focus
<p:focus for="commentsID"/>
There is an onShow attribute on the dialog, you can use that to set the focus manually
<p:dialog id="loadPage"
onShow="document.getElementById("commentsID").focus();"/>
I am using primefaces6.0 on Jsf2.0 & mojarra 2.0.9-SNAPSHOT.
I have a commandLink on the actions facet of a panel. This panel is rendered using ui:repeat so as to be dynamic. The panels are grouped inside a Tab.
So the i have dynamic p:tab , and inside each tab, the panels are rendered using ui:repeat.
My problem is the commandLInk action or actionlistener is called only for the first panel of each tab. When i click on other panels of the same tab - the action is not fired.
Any leads ?
Below is my xhtml code.
<p:tabView id="tabViewId"
value="#{userdashboard.chartGroupsList}" var="cg" onTabShow="reflowChart()">
<p:tab title="#{cg.groupName}" >
<ui:repeat var="c" value="#{cg.charts}" varStatus="status">
<ui:fragment rendered="#{c.typeCode ne 'TABLE1'}">
<div class="Container#{c.chartSpecificContainerWidth} Responsive#{c.chartSpecificContainerWidth} NoIndent"
id="parentDivId#{c.rowid}" >
<p:panel header="" styleClass="panelChart"
toggleable="true" toggleOrientation="horizontal">
<f:facet name="actions" >
<p:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"
action="#{userdashboard.updateUIColumnLayout}" ajax="false">
<h:outputText value="#{c.id}"/>
</p:commandLink>
</f:facet>
</p:panel>
</ui:fragment>
</ui:repeat>
</p:tab>
</p:tabView>
I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.
I have a problem with tabView. The 1st tab should always display the same content (called search template which is identified with #{not curSearch.isClosable()}. All other tabs are search instances (identified with #{curSearch.isClosable()}
Here is the code:
<p:tabView id="searchTabViewId" var="curSearch" value="#{searchBL.searchInstances}"
activeIndex="#{searchBL.activeTabIndex}" styleClass="searchTabView">
<!-- search template tab -->
<ui:include src="/icarchive/sections/search/firstSearchTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
<!-- search instances tabs -->
<ui:include src="/icarchive/sections/search/searchInstanceTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tabView>
Unfortunately there are methods on the 1st tabs curSearch object called which are used on 2nd and following tabs only. If I do not use the ui:insert it does not change anything.
Anybody knows where is my fault?
Regards
Oliver
This works:
<p:tabView id="searchTabViewId" styleClass="searchTabView" activeIndex="#{searchBL.activeTabIndex}">
<!-- do the iteration over the search instances NOT in the tabView because this will not work with ui:include -->
<c:forEach items="#{searchBL.searchInstances}" var="curSearch">
<p:tab closable="#{curSearch.isCloseable()}">
<f:facet name="title">
<p:graphicImage library="images" name="search_tab.png" height="16" styleClass="tabImage"
rendered="#{not curSearch.isCloseable()}" />
<h:outputText value="#{curSearch.title}" />
</f:facet>
<!-- do not use 2 ui:includes here, the dynamic must be in the src attribute to get it work -->
<ui:include
src="#{curSearch.closeable ? '/sections/search/searchInstanceTab.xhtml' : '/sections/search/firstSearchTab.xhtml'}">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tab>
</c:forEach>
I had the same problem, only solution i found is wrap include in other component and clamp with render which one is displayed. For initial load if you have ids depending on content you will need to set id prefix so that it does not allow empty id fields:
<p:tabView id="tabsView" dynamic="true" cache="true"
value="#{TabViewController.tabView.openedTabs}" var="tabDefinition" activeIndex="#{TabViewController.tabView.activeIndex}">
<p:ajax event="tabClose" listener="#{TabViewController.onCloseTab}" update="tabsView"/>
<p:ajax event="tabChange" update="tabsView"/>
<p:tab id="tab#{tabDefinition.id}" title="#{tabDefinition.title}" closable="true" action="">
<f:facet name="title">
<h:outputText value="#{tabDefinition.title}"/>
</f:facet>
<p:outputPanel style="display:block" rendered="#{'dataTable'.equals(tabDefinition.type)}">
<ui:include src="dataTable.xhtml">
<ui:param name="dataTableName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
<p:outputPanel style="display:block" rendered="#{'form'.equals(tabDefinition.type)}">
<ui:include src="form.xhtml">
<ui:param name="formId" value="#{tabDefinition.id}"/>
<ui:param name="formName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
</p:tab>
</p:tabView>
Commandbutton with id("myButtonId2") works fine. I mean it updates "myOutputPanel"
but commandbutton(myButtonId) which is inside datatable doesn't update outputPanel. I found the suggestions and tried with the following,
update=":myForm:myOutputPanel"
update="#myForm"
update=":myOutputPanel"
But none of them worked...
Here is the snippet...
<h:form id="myForm" prependId="false">
<p:panel id="myPanel">
<p:dataTable id="myDatatable">
<p:column style="width:4%">
<p:commandButton id="myButtonId" actionListener="#{bean.showPanel}" update="myOutputPanel"/>
</p:column>
</p:dataTable>
<p:commandButton id="myButtonId2" update="myOutputPanel"/>
</p:panel>
<p:outputPanel id="myOutputPanel" rendered="#{bean.show}">
//some stuff
</p:outputPanel>
Try to put your <p:outputPanel /> inside a <p:panel />
and add a "widgetVar" attribute
For example : <p:panel widgetVar="var" [..]>
and just update the panel directly with update="#widgetVar(var)"