Is there a special way to include the p:focus on dialog window?
you can set focus to the dialog by calling the show() method for that dialog.
<p:dialog id="dialog" modal="true" widgetVar="ajaxDialog" width="0"
draggable="false" closable="false" resizable="false">
<p:graphicImage value="./images/ajax-loader.gif" />
</p:dialog>
set the focus with
ajaxDialog.show();
You can set focus automatically when a dialog is shown, using the tag p:focus.
Example:
<p:dialog id="myDialog">
<h:form id="myForm">
<p:focus context="myForm"/>
<p:inputText id="username" value="#{userBean.username}/>
</h:form>
</p:dialog>
when you open the dialog, The first visible editable field will gain focus.
References:
PrimeFaces ShowCase - Focus
Related
I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()
I'm trying to permanently show the p:tooltip in a PrimeFaces project I'm working on.
This is my current code:
<p:graphicImage id="testImg" name="/img/testImg.jpg" onclick="PF('info').show();" style="cursor: pointer"/>
<p:tooltip for="testImg" value="further information" position="right" />
<p:dialog widgetVar="info" modal="true" closeOnEscape="true" >
<h:outputText value="bla bla bla"/>
</p:dialog>
I tried this:
<p:tooltip for="testImg" value="further information" position="right" showEevent="permanent"/>
but it didn't work.
Is there any way to control the tooltip and have it permanently visible without having to mouse over or focus the controlling element?
As you have noticed, there is no show event called permanent. What you could do is controlling the tooltip with JavaScript using a widget variable. You can assign one for the tooltip using the widgetVar attribute. The tooltip widget has several functions, one of them is show() (to show the tooltip).
When the tooltip is shown there is a delay of 150 msec, so set that to 0 to immediately show the tooltip. To prevent the tooltip from being hidden, set the hideEvent to some non existing event (like none).
Putting it all together:
<h:panelGrid columns="3">
<h:outputText value="Permanent" />
<p:inputText id="permanent"
title="Permanent tooltip" />
<p:tooltip id="permanentTip"
for="permanent"
widgetVar="permanentTip"
showDelay="0"
hideEvent="none"/>
</h:panelGrid>
<script>
$(function(){
PF('permanentTip').show();
});
</script>
See also:
How can I get a PrimeFaces widgetVar function list?
I have a datatable, with a command Button in each row,
The issue is that when i need to open one dialog for the first one, and then by clicking on another button, i need to update it. The issue is when i click on the second button, it closes the dialog and the user have to click once again on the second button to open the dialog again!
Thank's in advance for your help,
i'm here for further explanation
to my knowldege,You can open as many dialog as you want, only make sure that you gave them a unique widgetVar id:
<p:dialog widgetVar="dlg1">
<h:outputText value="Hello from first dialog"/>
</p:dialog>
<p:dialog widgetVar="dlg2">
<h:outputText value="Hello from second dialog"/>
</p:dialog>
...
<p:commandButton value="Open First" onclick="dlg1.show()"/>
<p:commandButton value="Open Second" onclick="dlg2.show()"/>
Clicking on the commandButton above will open two separate dialog parallelly.
I think your buttons made an update to the entire Naming Container that wraps your Dialog. If u do that, that's what you get.
You should update Container inside your Dialog that wraps your component inside.
Example :
Don't :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
// components
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('gridContainer')}"/>
Do :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
<h:panelGrid id="insideContainer">
// components
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('insideContainer')}"/>
I think you get the idea.
Hope it helps.
I'm using primefaces poll to dispaly incrementing counter value into a modal dialog. But it doesn't work. I placed the same code in the main form and it worked very well. But I need to display counter value into the modal dialog.
<p:dialog id="dlgPoll" widgetVar="blockUIWidget1" header="Hitonclick" modal="true"
resizable="false" closable="false" >
<h:form>
<h:outputText id="txt_count" value="Extracting is in progress. Please wait...
#{mailMB.count}" />
<p:poll listener="#{mailMB.increment}" interval="1" update="txt_count" >
</p:poll>
</h:form>
</:p:dialog>
I am getting confused on the constrcut of a Primefaces 3 dialog.
I see question in SO that has this pattern. The form is outside the dialog.
<h:form>
<p:dialog id="dialog" modal="true" widgetVar="dlg">
</p:dialog>
</h:form>
But other question has this.
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
The Primefaces showcase http://www.primefaces.org/showcase/ui/dialogLogin.jsf favors the latter one.
I am getting confused if there's any valid reason for using the one over the other?
Thanks
You always better use place the <h:form> inside <p:dialog like this
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
cause you dialog content might be "taken" out from your page and appended some where else in your DOM tree , so if you place the dialog inside some form, it can cause your dialog to be relocated somewhere else and to cause all your buttons/links and other elements to stop working (this is a very common question here in SO)
So in order to be allays on the safe side place you <h:form> tag inside your <p:dialog tag
Another example is when you use appendToBody="true" in dialog :
if dialog is inside an h:form component and appendToBody is enabled, on the browser
dialog would be outside of form and may cause unexpected results. In this case, nest a form inside
a dialog.