I have a h:form with several inputs and each of them got its own h:message and I'm looking for a way to show (using render or assigning some styleClass) some other element only when specific h:message is being shown (and hide when that h:message is not being displayed).
Here a code snippet
<li>
<h:panelGroup id="current_password_wrapper">
<p:password value="#{myBean.myCurrPass}" id="current_password" required="true"
styleClass="required_field" />
</h:panelGroup>
<h:message for="current_password"/>
</li>
<li>
<h:panelGroup id="new_password_wrapper">
<p:password value="#{myBean.myNewPass}" id="new_password" required="true"/>
</h:panelGroup>
<h:message for="new_password"/>
<h:commandLink value="my value"/>
</li>
I want to make the h:commandLink visible only when the <h:message for="new_password"/> is being displayed
So far I couldn't find anything...
If your environment supports EL 2.2, then you could check if FacesContext#getMessageList() isn't empty for the particular client ID.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not empty facesContext.getMessageList(new_password.clientId)}" />
If the message is being shown as result of a validation error, then you could also just check the UIInput#isValid() state of the component associated with the message.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not new_password.valid}" />
Note that manually adding a faces message to the context won't mark the input component invalid. Therefor either a true Validator should be used which throws a ValidatorException, or an explicit input.setValid(false) call has to be done programmatically.
I think with the answer to this question you requirement can be archived:
How to number JSF error messages and attach number to invalid component
I think you can do something like this:
<h:outputText value="output text" rendered="#{bean.messageIndexes['form:input1'] > 0}" />
Related
I have to check if my property file is empty for certain label based on that I have to render the element but even when the label is empty i still get the element displaying key:
<h:panelGroup rendered="#{not empty I18N['key_hint_message'] }">
<h:outputLabel id="hint_label" value="#{I18N['key_label_hint']}
"></h:outputLabel>
<h:outputText value="#{I18N['key_hint_message']}" ></h:outputText>
</h:panelGroup>
You can use ResourceBundle#containsKey() for this.
<h:panelGroup rendered="#{I18N.containsKey('key_hint_message')}">
<h:outputLabel value="#{I18N['key_label_hint']}" />
<h:outputText value="#{I18N['key_hint_message']}" />
</h:panelGroup>
You'd better not rely on default format of missing keys as this can be overriden by a custom resource bundle resolver.
JSF implementation displays by defaults missing resources as ???resource???, So you can use the fn:contains JSTL function in your rendered attribute like this:
<h:panelGroup rendered="${not fn:contains(I18N['key_hint_message'], '???')}">
<h:outputLabel id="hint_label" value="#{I18N['key_label_hint']}"/>
<h:outputText value="#{I18N['key_hint_message']}" />
</h:panelGroup>
I've been struggling with this for two days with no success and I think it's already time to ask for your help. But first of all, this is what I'm using:
JSF 2 Mojara 2.1.1
Primefaces 3.4.2
Netbeans 7.1.1
Tomcat 7.0.37
And now, the problem: I have a main page which is composed by several other pages using several <ui:include .. /> tags, like this:
<ui:composition template="/resources/templates/template1.xhtml">
<ui:define name="appData">
<p:panelGrid columns="1" id="contenidoAplicacion" styleClass="noborder">
<h:form id="fNewPerson">
<p:panel header="New employee" style="min-height:40em">
<ui:include src="./forms/personal.xhtml" />
<p:accordionPanel styleClass="noborder" activeIndex="3">
<p:tab id="tabSomeData" title="Identidad profesional" >
<ui:include src="./forms/formSomeData.xhtml" />
</p:tab>
....
....
</ui:define>
</ui:composition>
The personal.xhtm file looks like this:
<p:panelGrid>
<p:row>
<p:column >
<h:outputLabel value="Field1"/>
<p:inputText label="Field1" id="field1" value="#{dataBacking.selectedPerson.field1}" tabindex="1"
required="true" size="10" >
<f:convertNumber for="field1" integerOnly="true" groupingUsed="false"/>
</p:inputText>
<p:inputText id="field2" value="#{dataBacking.selectedPerson.field2}" tabindex="2" required="true" size="1" maxlength="1" >
<p:ajax event="keyup" listener="#{dataBacking.check}"
process="field1 field2" partialSubmit="true"
update="field1 field2 photo"/>
</p:inputText>
</p:column>
<p:column rowspan="5" >
<p:graphicImage id="photo" value="#{dataBacking.selectedPerson.photo}" width="90" />
</p:column>
</p:row>
...
</p:panelGrid>
The check() method in the dataBacking class is irrelevant because it only checks if the field1 and the field2 meet some rules and it works properly. The problem comes when the main page is loaded for the first time. In that case, the <p:ajax /> component in personal.xhtml doesn't work. I have to reload the page (simply by pressing the F5 key) and this time it works as it would be expected.
I've been changing some attributes of the component, but nothing seems to work. I really don't know what else to do. Any kind of help will be apreciated.
EDITED. After one more day, I think the problem has nothing to do with Primefaces ajax component, as the title of the question suggested. I've come to this conclusion through these two facts:
The behaviour with the <f:ajax .../> component remains the same.
I've figured out that the view relative to the first time I load the page is not persisted. I'll try to explain myself.
The DataBacking class has defined its scope as view so that the page can "see" all the attributes and methods during the time it's been shown to the user. However, I've noticed that the constructor is called twice: the first time the page is loaded (and then, none of the methods of the class are successfully invoked) and when I refresh the page. In this last case, the behaviour of both the page and the class is the expected one.
I am calling a method on the click of link. The following code works ajaxfully
<ui:repeat value="#{myBean.names}" var="name"
varStatus="idx">
<li>
<h:commandLink value="#{name.label}">
<f:ajax execute="#this" event="click" render="#all" listener="#{myBean.changeActiveName}" >
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
But when I try to pass parameter to the Ajax call it starts refreshing the whole page
<ui:repeat value="#{myBean.names}" var="name"
varStatus="idx">
<li>
<h:commandLink value="#{name.label}">
<f:ajax execute="#this" event="click" render="#all" listener="#{myBean.changeActiveName}" >
<f:param name="idx" value="#{idx}" />
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
What is wrong with this code?
The <f:param> has to be a child of the parent UICommand component, not of <f:ajax>.
<h:commandLink value="#{name.label}">
<f:param name="idx" value="#{idx}" />
<f:ajax listener="#{myBean.changeActiveName}" render="#all" />
</h:commandLink>
(note that I removed the execute and event attributes as your definitions are the defaults already; plus I wonder how it's useful to send a whole IterationStatus instance as request parameter ... maybe you just wanted to send the index instead? Use #{idx.index} instead or so)
See also:
How can I pass selected row to commandLink inside dataTable? (although this treats <h:dataTable>, exactly the same answer applies to <ui:repeat> as well)
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 7 years ago.
When I try to render a panelGroup by an ajax call, it gives unknown id.
<h:form id="form1" prependId=false>
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render="panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
When I tried this code, it gives unknown id panel1. I tried with id ":panel1" too. I get the same error.
A relative client ID (i.e. not starting with :) is relative to the current parent NamingContainer component. The <ui:repeat> is also a NamingContainer. So the render="panel1" is looking for the component within the context of <ui:repeat>. This isn't going to work. An absolute client ID (i.e. starting with :) is looking for the component within the context of view root. But you've it inside a <h:form> -which is in turn another NamingContainer component-, so the render=":panel" is also not going to work.
The following should work, with prependId="false" removed so that you can refer it:
<h:form id="form1">
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
By the way, if you actually want to render only the table, then you should be doing this:
<h:form id="form1">
<h:panelGroup>
<h:dataTable id="table1" />
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:table1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
Update: as per the comments, it turns out that you have changed the JSF default NamingContainer separator character from : to _ by configuration. In that case, you need to use _ instead of : in the client ID selector.
<f:ajax execute="#form" render="_form1_panel1" listener="#{bean.page}" />
<ui:repeat value="#{interaction.interactionListBean}" var="interactionItr">
<h:commandLink value="#{interactionItr.interactionDate}" styleClass="#{interaction.createImage}" style="margin:0 5px 5px 0!important; display:inline-block;"><br/>
<f:ajax render=":formId:interactionDate :formId:category :formId:activity :formId:status :formId:channel :formId:status1 :formId:caseId :formId:comment :formId:user1 :formId:team :formId:user :formId:transit "
listener="#{interactionController.interactionDetailGet}"/>
<f:param name="RefId" value="#{interaction.interactionRefId}"/>
</h:commandLink>
</ui:repeat>
problem :
please refer above with above code their is no exception on console but the ajax listerner will not invoke when I saw this post similiar kind of concept being use just I was place the exceute="#form" then my coding is working fine
solution:
execute="#form"
So I have been stumped most of the day today trying to call a method in my backing bean when a component changes values. Everything works correctly if my components are outside of a <p:dialog>, however when nested inside a dialog the server side never happens. Originally I was working with the <p:calendar> control, but noticed it also didn't work with a simple inputText. The following example works:
<h:panelGrid columns="3">
<h:outputText value="Start"/>
<p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
<p:ajax event="change" update="play"/>
</p:inputText>
<h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
</h:panelGrid>
My backing bean method looks like
public void startChanged(ValueChangeEvent event) { }
This method is invoked after a tab out of the inputText, however when wrapped like the following the method never gets invoked:
<p:dialog widgetVar="efDlg" zindex="10" appendToBody="true" header="Create Custom Date Range"
modal="true" height="375" width="450" resizable="false" closable="false" >
<h:panelGrid columns="4">
<h:outputText value="Start"/>
<p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
<p:ajax event="change" update="play"/>
</p:inputText>
<h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
<p:inputText id="endOfRange" value="#{myBean.endRange}" valueChangeListener="#{myBean.endChanged}"/>
</h:panelGrid>
<div class="customRangeButtons">
<span>
<p:commandButton value="Cancel" onstart="efDlg.hide();" actionListener="#{myBean.cancelCustomDateRange}" update="pGraphs"/>
</span>
<span style="margin-left: 300px;">
<p:commandButton value="Ok" type="submit" onstart="efDlg.hide();" action="#{myBean.saveCustomDateRange()}" update="pGraphs"/>
</span>
</div>
</p:dialog>
Note I am using Primefaces 2.2.1 with Mojarra 2.1.0. Any ideas as to why I can't get the startChanged method to be called when the value has changed?
Maybe I'm wrong about this (I don't have my project code at home to verify) but isn't this:
<p:ajax event="change" update="play"/>
supposed to be:
<p:ajax event="valueChange" update="play"/>
I know that most of the Ajax event values are like the JavaScript event handlers with the 'on' removed, but valueChange is a special value in JSF Ajax tags.
For the record, I sometimes pair up two Ajax child tags inside an inputText, like:
<p:ajax event="valueChange" process="#this" update="whatever"/>
<p:ajax event="keyUp" process="#this" update="whatever"/>
This will deal with each keystroke at it is entered as well as copy-and-paste and loss of focus on the parent input text.
I have also come across the same problem. I am also using a single form and no form inside the dialog. As long as I do not have the appendToBody="true" for my dialog the input values and ajax and submit happens correctly. As soon as I add that attribute with true, for better/correct rendering, the input values are not accepted.