I have a actionListener in ManagedBean that make some process and i need focus a specific inputText after this proccess is finished. So i have this commandButton:
<p:commandButton icon="ui-icon-play" value="Continuar" id="commandButtonContinuar"
actionListener="#{arMB.salveAndContinue}"
update=":formManterAr:dialogManterAr"
oncomplete="if (!args.validationFailed) {varDialogManterAr.show();}" />
And i need to focus this inputText bellow, after commandButton is complete.
<h:outputText value="Nome Destinatário: *" />
<p:inputText value="#{arMB.bean.nomeDestinatario}" required="true"
widgetVar="varDestinatario" id="destinatario"
requiredMessage="O nome é obrigatório" />
You can change the oncomplete function to call the method focus of your input text so
oncomplete="focusChange()"
<script type="text/javascript">
function focusChange(){
$('varDestinatario').focus();
}
</script>
You can also check the focus component the prime faces
You can try this,
<p:commandButton icon="ui-icon-play" value="Continuar" id="commandButtonContinuar"
actionListener="#{arMB.salveAndContinue}"
update=":formManterAr:dialogManterAr"
oncomplete="focusfn()" />
function setFocus() {
document.getElementById('formId:destinatario').focus();
}
Related
my example:
<p:growl id="growlId"/>
<h:form id="form">
<h:inputText id="input" value="#{messageManagedBean.message}"
required="true"
requiredMessage="input is not null!"/>
<p:message for="input"/>
<p:commandButton value="Execute JSF Lifecycle - Invoke Action One"
validateClient="true"
action="#{messageManagedBean.doSomeAction}"
update="form growlId"></p:commandButton>
</h:form>
public String doSomeAction() {
if (!this.message.equals("")) {
FacesContext.getCurrentInstance().addMessage("growlId", new FacesMessage("Header", "Success!"));
}
return "";
}
in this case, i check if input null, will show requiredMessage="input is not null!" when click commandbutton, but growl show this message too.
i want to specified id of growl in server side (bean), i'm to try specified only update="form" :
<p:commandButton ...
action="#{messageManagedBean.doSomeAction}"
update="form"></p:commandButton>
but, if input not null, when submit,i dont receive message of growl,
thanks all!
I found a solution, i'm using RequestContext.getCurrentInstance().update("growlId");
I need create dynamic confirmDialog. I have a dynamicallly created CommandButton. So when it press, confirmDialog will show. I do not know how to show it on CommandButton pressed.
Your button should be like this:
<p:commandLink oncomplete="confirmation.show()"
action="#{campagneComtroller.messageDeleteCam1(c)}"
update=":frmDlgDel:confirmDialog">
<p:graphicImage value="/image/delete.png" height="20" width="20"/>
</p:commandLink>
Your confirmDialog should be like this:
<h:form id="frmDlgDel">
<p:confirmDialog id="confirmDialog"
message="#{campagneComtroller.messageDeleteCam1}"
header="#{bundles.messages['message.SupprimerGeneral']}" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="#{bundles.messages['message.OuiSure']}" oncomplete="confirmation.hide()" update=":formCam :frmDlgDel"
actionListener="#{campagneComtroller.deleteCam1()}" />
<p:commandButton id="decline" value="NonPasEncore" onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
</h:form>
Your java code should be like this:
public void messageDeleteCam1(Cam cam) {
conditionVerified = true; // ... you can put here your treatments
if (conditionVerified) {
messageDeleteCam1 = "this cam is bla bla bla ";
} else {
messageDeleteCam1 = "are you sure to delete this cam ?";
}
}
NB: we have used here oncomplete + update, that's why we could see the difference in the confirmDialog after java treatments.
I have a popup in which you have to select components for you pc. Each component contains a label and a drop down list with all the selected components in the database. Next to the list there is an 'add' button, when clicked it give another popup, which is used when the user does not find what he wants in the list. The add function calls a method which checks the input of the user for already existing inputs and adds if there is none. MY PROBLEM: is that I can not find a solution for refreshing the list which was updated. I am trying to use <p:ajax /> but I keep getting Cannot find component errors.
---HTML CODE----
<form id="dialog">
<h:outputText value="Computer: " styleClass="dialog-labels" />
<ul style="list-style-type: none">
<li>
<div class="dialog-container">
<h:outputLabel value="Processor: " style="float:left;" />
<p:selectOneMenu id="procs" filterFunction="true" filterMatchMode="true" styleClass="dialog-dropdown-list" style="width:15em;">
<f:selectItem itemLabel="Select Processor" itemValue="" noSelectionOption="true" />
<f:selectItems id="list" value="#{javaHTMLConnection.procList}" />
</p:selectOneMenu>
<p:commandButton value="Add" id="addProc" styleClass="dialog-buttons" onclick="PF('addProcBox').show();" style="font-size: 10px;" />
<h:form id="popUp">
<p:dialog header="Add Processor" widgetVar="addProcBox" height="200" width="180" draggable="false" resizable="false" style="font-size:13px;">
<h:outputLabel value="Processor: " style="float:left;" />
<p:inputText id="procInput" value="#{components.procID}"/>
<p:growl id="growl" life="10000" />
<p:commandButton value="Save" styleClass="dialog-bottom-buttons" action="#{components.addProcessor()}" update="growl" onclick="PF('addProcBox').hide();" style="font-size: 10px;" />
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />
<p:commandButton value="Cancel" id="CancelAddProc" styleClass="dialog-bottom-buttons" onclick="PF('addProcBox').hide();" style="font-size: 10px;" />
</p:dialog>
</h:form>
</div>
</li>
</form>
----JavaHTMLConnection----
public void onAdd()
{
if(components.addProcessor()==true)
{
components.getAllComponents();
}
}
----Components(Java code)----
public boolean addProcessor()
{
try
{
db.openDatabase();
db.con.setAutoCommit(false);
if (!db.ifExists("processor.name", "processor", procID))
{
db.Entry("processor", procID);
addMessage("Success ! Your input has been saved");
return true;
}
else
{
addMessage("Error, the input already exists");
}
}
catch (SQLException e)
{
try
{
db.con.rollback();
}
catch (SQLException e1)
{
e1.printStackTrace();
}
e.printStackTrace();
}
finally
{
try
{
db.con.setAutoCommit(true);
}
catch (SQLException e)
{
e.printStackTrace();
}
}
return false;
}
P.S.: Don't mind the naming as when this will be figured out everything will be made generic as I need to adapt this to 15 more components
As Emil already mentioned, nested forms are a really bad thing which you should get rid of immediately.
Also, as Emil suggested, that kind of error message is usually related to incorrect component-selectors. Those are mainly caused due to the fact that a parent naming container is missing in the selector. Either determine the correct id using some debugging tool or, instead of
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />
try using some of the solutions suggested in this thread: Primefaces - Cannot find component with identifier outside the datatable
I personally prefer to use the following syntax, which relies on a primefaces-method searching for an id in various naming containers:
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":#{p:component('list')}" />
First of all, you have nested forms, which you should get rid of.
As for question you should inspect the specific html element (for example by using firebug) to find out the id of it.
I need to put child components in primefaces subtable footer (p:columngroup type="footer"), but standard subtable renderer doesn't provide such opportunity. So I have overrided org.primefaces.component.SubTableRenderer to add children rendering:
public class CustomSubTableRenderer extends SubTableRenderer{
#Override
protected void encodeColumnFooter(FacesContext context, SubTable table, Column column) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String style = column.getStyle();
String styleClass = column.getStyleClass();
styleClass = styleClass == null ? DataTable.COLUMN_FOOTER_CLASS : DataTable.COLUMN_FOOTER_CLASS + " " + styleClass;
writer.startElement("td", null);
writer.writeAttribute("class", styleClass, null);
if(column.getRowspan() != 1) writer.writeAttribute("rowspan", column.getRowspan(), null);
if(column.getColspan() != 1) writer.writeAttribute("colspan", column.getColspan(), null);
if(style != null) writer.writeAttribute("style", style, null);
//encode children
for(UIComponent footerColumnChild : column.getChildren()) {
if(footerColumnChild.isRendered()) {
footerColumnChild.encodeAll(context);
}
}
UIComponent facet = column.getFacet("footer");
String text = column.getFooterText();
if(facet != null) {
facet.encodeAll(context);
} else if(text != null) {
writer.write(text);
}
writer.endElement("td");
}
}
When I put some child components in p:column group like:
<p:dataTable>
<p:subTable>
<p:column>..</p:column>
<p:columnGroup type="footer"> <p:row> <p:column colspan="3">
<p:commandButton id="button"
action="#{myBean.someAction}"
oncomplete="jQuery('#select').modal('show');return false;"
value="#{val.add}" alt="#{val.add}"
title="#{val.add}"> </p:commandButton>
<f:setPropertyActionListener value="#{otherBean.id}"
target="#{anotherBean.selectedBackId}" /></p:column> </p:row>
</p:columnGroup> </p:subTable>
</p:dataTable>
Button is rendered and onClick event invokes fine, but neither button's action nor f:setPropertyActionListener don't invokes. How to make them work?
if I change p:columnGroup type="footer" construction to p:column tag than button action and f:setPropertyActionListener both work fine
PrimeFaces has a bug wherein a commandButton or commandLink doesn't fire the action listener if it is located in the header (source - see second defect). I have a hunch you've encountered the same problem in the footer.
This was fixed in a recent release, but it's not yet available to the public. If you want to use a PrimeFaces button (rather than a standard HTML button), you will have to buy a PrimeFaces Elite subscription or compile the source from scratch.
I thing you can put the setPropertyActionListener inside the commandButton like this:
<p:commandButton ...>
<f:setPropertyActionListener value="#{otherBean.id}" target="#{anotherBean.selectedBackId}"/>
</p:commandButton>
<p:commandButton
action="#{customerBean.remove}"
value="Delte"
title="Delete"
update="customer_table">
<f:setPropertyActionListener
target="#{customerBean.customer}"
value="#{cursomer}" />
<p:confirm
header="Confirmation"
message="Are you sure?"
icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
I have a p:dataGrid that used to update itself in 3.0.1. Now I upgraded to PF 3.1 and the ajax update event of the "availableIcons" component does not fire anymore. I don't get an error that the component is not found in the view.
The XHMTL
<h:form id="Application">
......
<p:confirmDialog id="iconDialog" message="Select one icon"
showEffect="bounce" hideEffect="explode" header="Icon Selection"
severity="alert" widgetVar="iconSelect" modal="false">
<p:dataGrid id="availableIcons" var="icon"
value="#{appEditController.availableIcons}" columns="4">
<p:column>
<p:panel id="pnl" header="" style="text-align:center">
<h:panelGrid columns="1" style="width:100%" id="iconPanelGrid">
<p:graphicImage value="/resources/icons/#{icon.icon}"
id="iconImage" />
<p:selectBooleanCheckbox id="iconSelector"
value="#{icon.selected}"
disabled="#{appEditController.isIconSelected(icon)}">
<p:ajax update="availableIcons" event="change"
process="availableIcons"
listener="#{appEditController.iconSelectedChanged(icon)}" />
</p:selectBooleanCheckbox>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:commandButton value="Done" update="currentIcon"
action="#{appEditController.updateCurrentIcon}" ajax="false"
oncomplete="iconSelect.hide()" />
</p:confirmDialog>
.......
</h:form>
I don't see what's missing or what's incorrect.
This is the backing bean code
public void updateCurrentIcon() {
for (IconVO iconVO : availableIcons) {
if (iconVO.isSelected()) {
log.debug("CURRENT ICON IS NOW " + iconVO.getIcon());
currentIcon = iconVO;
break;
}
}
}
public void iconSelectedChanged(IconVO iconVO) {
if (iconVO == currentIcon) {
log.debug("NULLING ICON");
currentIcon = null;
} else {
log.debug("SETTING NEW ICON");
currentIcon = iconVO;
}
}
public boolean isIconSelected(IconVO iconVO) {
log.debug("IS ICON SELECTED " + iconVO.getIcon());
if (currentIcon == null
|| iconVO.getIcon().equals(currentIcon.getIcon())) {
return false;
}
return currentIcon != null;
}
I tried to do update="#form", then the update fires but it closes the modal panel completely.
Thanks,
Coen
Indeed, the way how PrimeFaces locates components by relative client ID has been changed in PrimeFaces 3.1 to adhere the UIComponent#findComponent() javadoc.
In your particular case, you need to specify the absolute client ID of the <p:dataGrid> instead. Easiest way to figure it is to check the ID of the <p:dataGrid> in the generated HTML source. With the code given so far, that would be Application:availableIcons. You need to prefix it with : to make it absolute and then reference it in update as follows:
<p:ajax update=":Application:availableIcons" ... />
Update as per the comments it turns out to not work at all. You could try wrapping the table in some invisible containing component like <h:panelGroup> and update it instead. Alternatively, you could consider moving the <h:form> into the dialog and use update="#form" instead. Having the <h:form> outside the dialog is kind of odd anyway. You surely won't submit all the other inputs which are outside the dialog inside the same form.