I want to open a tooltip when page loads for first time... somehow just like a help guide for first time use opens the page, not waiting for him to hover mouse on the object.
Best approach?
thanks
You can use the onload attribute in the body tag:
<h:body onload="PF('tip1').show();">
<h:form>
<p:inputText id="txt" title="Type something into this field"/>
<p:tooltip for="txt" widgetVar="tip1" value="tooltip text"/>
</h:form>
</h:body>
You can use PrimeFaces Extensions Auto Shown tooltip
Download jar file from: primefaces-extensions-6.0.0.jar
namespace:
xmlns:pe="http://primefaces.org/ui/extensions"
usage:
<h:panelGrid id="details" columns="2">
<h:outputLabel value="Tooltip on InputText: "/>
<h:panelGroup layout="block" style="padding: 0 0 3px 0;">
<p:inputText id="txt" title="Type something into this field"/>
<pe:tooltip for="txt" autoShow="true" widgetVar="tip1"
myPosition="left center" atPosition="right center"/>
</h:panelGroup>
Related
This is what I've tried so far:
<p:wizard id="ss"
widgetVar="mywiz"
flowListener="#{userWizard1.onFlowProcess}"
style="font-size: 20px;">
</p:wizard
It's not working for the button, only for messages.
One of many options is to manually add primefaces button into wizard component.
Example:
.xhtml file
<p:wizard flowListener="#{testBean.onFlowProcess}"
id="wizard"
showNavBar="false"
showStepStatus="false"
widgetVar="wizardVar">
<p:tab ...>
...
<p:commandButton id="btnNext"
value="Next"
oncomplete="PF('wizardVar').next()"
process="#this" />
</p:tab>
...
</p:wizard>
And then you can stylish your button as you wish.
I can't seem to make p:sticky work inside a p:dialog :
my dialog xhtml :
<p:dialog modal="true" height="490" width="700" resizable="false" >
<h:form id="form">
<p:toolbar id="tb">
<p:toolbarGroup align="right">
<p:commandButton value="save" />
</p:toolbarGroup>
</p:toolbar>
<p:sticky target="form:tb" />
</h:form>
</p:dialog>
It works fine from a simple page. any thoughts?
You are not doing anything wrong, it is just not supported. And due to a 'bad' issue report, it is closed as invalid http://code.google.com/p/primefaces/issues/detail?id=6341
Looking at the javascript source code of the sticky component, it checks scrolling of the window and not any other part inside it. So there is a big chance it will also fail in e.g. a p:layout.
Iam using primefaces 4.0 .I want to use dialog box . When i used it its printing the dialog content in the same page on load itself .Dialog box not opening
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="dlg.show()" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
also tried
in facesconfig.xml
org.primefaces.application.DialogActionListener
org.primefaces.application.DialogNavigationHandler
org.primefaces.application.DialogViewHandler
Thanks in advance
I missed adding
h:head
Thanks all for your response
I use primeface 3.5. I have a tabview and each tabview has got inputMasks with a form. I want to reset inputMask when i change the tab. I listen ontabchange event and reset value to="" but bean reset values but View doesn't reset.
<p:tabView id="tabViewOS" binding="#{docData.tabView}" dynamic="true" cache="true" rendered="#{userData.opRendered}">
<p:ajax event="tabChange" listener="#{docData.onTabChange}" immediate="true"/>
<p:tab id="tab1" title="AB">
<h:form id="ABForm">
<h:panelGrid id="abgrid" columns="3" cellpadding="5">
<h:outputText value="AB NO: " />
<p:inputMask value="#{docData.abNo}" mask="999-99999999"
id="ABinput" required="true"
</p:inputMask>
<p:message id="msgAB" for="ABinput" showDetail="true" autoUpdate="true" />
<h:outputText value="" />
<p:commandButton value="GETİR" style="float:right;" ajax="false"
action="#{docData.getDoc}" />
</h:panelGrid>
</h:form>
</p:tab>
public void onTabChange(TabChangeEvent event) {
this.activeTabIndex = tabView.getChildren().indexOf(event.getTab());
FacesContext.getCurrentInstance().renderResponse();
System.out.println(this.activeTabIndex);
this.abNo="";
documents.clear();
}
Try changing the way the event is called. Instead of immediate=true use process="#this".
Change this:
<p:ajax event="tabChange" listener="#{docData.onTabChange}" immediate="true"/>
To this:
<p:ajax event="tabChange" listener="#{docData.onTabChange}" process="#this" update="ABinput"/>
i guess as you said -dynamic="true" cache="false">- is solve my problem. Actually I tested program faulty, my problem has already solved. I think in my case cause of this situation cache=false as documentation said. Thank you.
Have a look at the primefaces documentation on p:tabView. On the one hand you have the property dynamic which specifies if the content of a tab is loaded with AJAX when you select some tag. On the other hand there is the property cache which specifies wheter or not the content of a tab is only dynamically loaded the first time you select a tab.
So regarding this informations setting dynamic="true" cache="false" on the p:tabView should do the trick for you.
Another interesting property for you would be activeIndex. As I see you are setting the index of the active tab manually on tab change. If you can submit tabview on tabchange and you have set activeIndex="#{docData.activeTabIndex}" the active tabindex is tracked automatically. Have a look at the documentation if this fits your requirements.
I use the dynamic overlayPanel of primefaces inside one p:tab inside one p:dialog like this :
<p:dialog id="dialog" modal="true" header="Nouveau Article"
widgetVar="dlg">
<h:form prependId="false" enctype="multipart/form-data">
<p:tabView id="monpanel">
<p:tab id="tab1" title="Informations">
....
</p:tab>
<p:tab id="tab2" title="Prix">
....
</p:tab>
<p:tab id="tab3" title="Stock et fournisseurs">
<h:outputLabel value="" /><h:outputLabel value="" /><h:outputLabel value="" />
<p:commandButton id="carBtn" value="Selectionner Fournisseurs" type="button" />
<p:overlayPanel appendToBody="true" my="left top" id="carPanel" for="carBtn" hideEffect="fade"
dynamic="true">
<p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}"
value="#{articlesMB.listfournisseurs}" selection="#{articlesMB.selectedFournisseurs}"
rows="10" paginator="true" >
<p:column selectionMode="multiple" style="width:20px" />
<p:column headerText="Id">
<h:outputText value="#{car.fournisseurId}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.personne.nom}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:tab>
</p:tabView>
<p:commandButton id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
</h:form>
</p:dialog>
in the first time it works fine, but when I click on the add button and the validation failed (for any cause) and I click on dynamic button of overlaypanel, it appears but when I check or uncheck one of rows of datatable it disappear, I don't know the cause
do you have any idea how to resolve this problem
You cammandButton should use 'process' attribute, you specify component to submit info(not specify overlay).
For ex:
<p:inputText id="txttest" required="true" value="" />
<p:commandButton process="txttest" id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
The reason your overlay panel only works once is because you update the panel that holds the command button that overlayPanel is attached to.
It is a bug in overlayPanel emerged after PF 5. You can fix this without resorting process attribute, I think solutions like this reduces the readability of the code.
If you define a widgetVar to overlayPanel, say 'carPanelWDG', and call PF('carPanelWDG').loadContents() function in the onComplete event of the command button everything just works. And even if there is no comment explaining the reason why you did such a thing, anyone can interpret this easily.