I'm trying to create a <p:diagram> with elements which contain input fields, but the problem is that for each added element, the name and ID are the same for each input field.
What I've tried to do to give each field a unique id is adding a bean-generated ID for each element, but this just gets omitted in the final code. Here's my EL/xhtml:
<p:diagram value="#{Controller.model}" style="height:600px;width:1500px" styleClass="ui-widget-content" var="lrvEl" scrollable="true">
<f:facet name="element">
<div onmouseleave="nodeOnMouseOut(this)" onclick="nodeOnClick(this)">
<h:outputText value="#{lrvEl.title}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
<h:outputText value="#{lrvEl.description}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
<h:inputText id="inputEpValue_#{lrvEl.id}" name="inputEpValue_#{lrvEl.id}" onchange="setScoreVal('#{lrvEl.id}', this)" rendered="#{lrvEl.isScore()}" style="display:block;margin-top:1em;height:10px;padding-left:4px">
</h:inputText>
</div>
</f:facet>
<p:ajax event="connect" listener="#{Controller.onConnect}" />
<p:ajax event="disconnect" listener="#{Controller.onDisconnect}" />
<p:ajax event="connectionChange" listener="#{Controller.onConnectionChange}" />
</p:diagram>
The important bit here is the <h:inputText id='inputEpValue_#{lrvEl.id}' ... > - this comes out on the page as the following:
editor:LRVContent:overlayForm_lm:inputEpValue
as if the value wasn't set, however, as you can see in the onchange field I use the same constellation. This gets rendered as onchange="setScoreVal('ep:2', this)" so that works.
Can I not dynamically set IDs for elements in this fashion? Is there another way?
Edit:
The actual Reason I want to do this is that, if I have more than one input with the same generated ID, the focus(/cursor) will automatically jump into the last generated input field when I click on any one of them, meaning I won't be able to actually change the value of any of those fields.
Related
Please help how to hide validatorMessage when user clearing the field:
<div class="item">
<p:outputLabel for="firstName" value="#{msgs['customerForm.firstName']}"/>
<p:inputText id="firstName" value="#{customerBean.customer.firstName}"
requiredMessage="#{msgs['Error.firstName.mandatory']}"
validatorMessage="#{msgs['Error.firstName.wrongFormat']}"required="true">
<f:validateRegex pattern="^([a-zA-Z]+[a-zA-Z\s\-]*){1,255}$" />
</p:inputText>
<p:message id="m_firstName" for="firstName" display="text"/>
</div>
You defined your field having two validations:
* required value validator
* regular expression validator
Both validators have equivalent priority, and both are run against your field value. And both of these validators see empty value as a problem, and your framework, unable to determine which of these two equivalent-looking failures is the "actual" failure, displays both.
To "fix" it, you should allow empty values to pass your regex, like this:
<f:validateRegex pattern="^([a-zA-Z]+[a-zA-Z\s\-]*){0,255}$" />
Notice that I changed number qualifier to allow 0-255 characters instead of 1-255 characters like before.
That should allow two of your validators cover different cases of invalid values, like you intended.
You can update the error messages if you put this in the input element. It will validate the input on every keyup event though.
<f:ajax execute="#this" event="keyup" render="m_firstName" />
i have p:selectOneMenu, all values are viewed correctly but just first on my list can be chosen for example, on my list i have e-mail addresses, i can choose everyone but mail is sending just on first of them on list. My JSF code:
<p:dataTable value="#{additionalOrdersBean.additionalOrdersList}"
var="additionalOrders" rowIndexVar="lp" id="myTable" editable="true>
<p:column>
<p:selectOneMenu id="recipient" value="#{additionalOrdersBean.mailTo}" converter="#{mailConverter}" required="true" requiredMessage="#{loc['fieldRequired']}">
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail1}" itemValue="#{mail.mail1}" />
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail2}" itemValue="#{mail.mail2}" />
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail3}" itemValue="#{mail.mail3}" />
</p:selectOneMenu>
<h:message for="recipient" style="color:red"/>
<h:commandButton value="#{loc['send']}" action="#{additionalOrdersBean.sendProtocol()}" onclick="sendProtocolDialog.hide()"/>
</p:column>
</p:dataTable>
My bean:
private String mail1;
private String mail2;
private String mail3;
public List<Building> getBuildingList2() {
buildingList2 = getBldRepo().findByLocationId(lid);
return buildingList2;
}
Can anyone know how to fix it? I wont to send e-mail on choosen address not just on first on my list. Thanks
You seem to expect that only the current row is submitted when you press the command button in the row. This is untrue. The command button submits the entire form. In your particular case, the form is wrapping the whole table and thus the dropdown in every single row is submitted.
However, the value attribute of all those dropdowns are bound to one and same bean property instead of to the currently iterated row.
The consequence is, for every single row, the currently selected value is set on the bean property, hereby everytime overriding the value set by the previous row until you end up with the selected value of the last row.
You've here basically a design mistake and a fundamental misunderstanding of how basic HTML forms work. You basically need to move the form to inside the table cell in order to submit only the data contained in the same cell to the server.
<p:dataTable ...>
<p:column>
<h:form>
...
</h:form>
</p:column>
</p:dataTable>
If that is design technically not an option (for example, because you've inputs in another cells of the same row, or outside the table which also need to be sent), then you'd need to bind the value attribute to the currently iterated row instead and pass exactly that row to the command button's action method:
<p:dataTable value="#{additionalOrdersBean.additionalOrdersList}" var="additionalOrders" ...>
<p:column>
<p:selectOneMenu value="#{additionalOrders.mailTo}" ...>
...
</p:selectOneMenu>
...
<h:commandButton value="#{loc['send']}" action="#{additionalOrdersBean.sendProtocol(additionalOrders)}" ... />
</p:column>
</p:dataTable>
It's by the way not self-documenting and quite confusing to have a plural in the var name. Wouldn't you rather call it additionalOrder? Or is the javabean/entity class representing a single additional order really named AdditionalOrders?
Unrelated to the concrete problem: doing business logic in getter methods is killing your application. Just don't do that. See also Why JSF calls getters multiple times.
I have two buttons that generate inputtexts when clicked. The problem is, when these two buttons are on the same xhtml, wichever is the first one, it is the only one that works.
If you need, here is an explanation on the Code 1 below:
It represents two inputtexts to get the name
and email of the author of a Document. moreAuthors represents
the method getMoreAuthors() that belongs to the Managed Bean inserirBean.
getMoreAuthors() returns a List<AuthorBean>.
The List<AuthorBean> is a property from the Managed Bean inserirBean.
The class AuthorBean creates the instances of Author, it has a property called
Author author.
AddAuthor() adds one more AuthorBean to the List<AuthorBean> in
Managed Bean inserirBean.
If you need, here is an explanation on the Code 2 below:
It follows the same structure from Code 1. Here, there's only one
inputtext that is used to get a subject of a Document.
moreSubjects returns a List<SubjectBean>. The class SubjectBean
creates the instances of the class Subjects.
SubjectBean has a property Subject sub,
and Subject has a property called String subject.
AddSubject() adds one more SubjectBean to the List<SubjectBean> in
Managed Bean inserirBean.
Code 1- If this is the only one on the xhtml, it works:
<h:form >
<h:dataTable value="#{inserirBean.moreAuthors}" var="authorBean">
<h:column>
Nome do Autor:
<h:inputText value="#{authorBean.author.name}" />
</h:column>
<h:column>
Email do Autor:
<h:inputText value="#{authorBean.author.email}" />
</h:column>
<f:facet name="footer">
<h:panelGroup>
<h:commandButton value="+" action="#{inserirBean.addAuthor()}" />
</h:panelGroup>
</f:facet>
</h:dataTable>
</h:form>
2- If this is the only one on the xhtml, it works too:
<h:form >
<h:dataTable value="#{inserirBean.moreSubjects}" var="subjectBean">
<h:column>
Palavras-chave:
<h:inputText value="#{subjectBean.sub.subject}" />
</h:column>
<f:facet name="footer">
<h:panelGroup>
<h:commandButton value="+" action="#{inserirBean.addSubject}" />
</h:panelGroup>
</f:facet>
</h:dataTable>
</h:form>
BUT, if I put these two blocks on the same xhtml, the one that appears first on the browser, always works, and the second, never - and I've already tried to change their position, but whichever I put first place on screen is the one that works.
What's causing this problem?
Thank you!
I just put the two datatables in code 1 and 2 inside the same <form> block and both worked.
I have a List in my backing bean. I want to present it in a table. I want table to have two rows - on left side, values from the list, and on the right side inputBoxes. It's the easy part. Here's my code:
<div class="table">
<h:dataTable id="korekty" styleClass="table table-hover"
value="#{searchBean.listX}" var="v">
<h:column>
<f:facet name="header">XXX</f:facet>
#{v.string}
</h:column>
<h:column>
<f:facet name="header">YYY</f:facet>
<h:inputText styleClass="form-control">
</h:inputText>
</h:column>
</h:dataTable>
</div>
The hard part of my problem is : in those inputtext user might put some numbers. Then after hitting SUBMIT button I want to create a list/map/whatever of inputed values. How can I do that? Thanks for help
First of all, prepare an array, or a list, containing placeholders for the given data alongside the list you've got:
List<String> initialData = ...;//initial data of n size
String[] submittedData = new String[initialData.size()];//array of the same size
Then, bind the <h:dataTable> component to the view to get access to the current row index of the iteration. This way you can finish your job by binding value of input elements to the corresponding objects in the array/list:
<h:dataTable binding="#{table}" ... >
<h:column>
<f:facet name="header">YYY</f:facet>
<h:inputText value="#{searchBean.submittedData[table.rowIndex]}" ... />
</h:column>
</h:dataTable>
I have an ice:dataTable like this.
<ice:dataTable id="pdet"
value="#{outerBean.nestedClassList}"
var="nestedObject" rendered="true">
<ice:column>
<f:facet name="header">Order Number</f:facet>
<ice:outputText value="#{nestedObject.orderNumber}" />
</ice:column>
<ice:column>
<f:facet name="header">Qty</f:facet>
<ice:inputText value="#{nestedObject.qty}"
id="qty"
label="'Qty' FOR 'Order Number':#{nestedObject.orderNumber} "
partialSubmit="true"
valueChangeListener="#{nestedObject.qtyChanged}"
validator="#{nestedObject.validateQty}">
</ice:inputText>
</ice:column>
</ice:dataTable>
There is a drop down list, depend on the selected value, I want to populate the particular data set. Always there is a value for qty and that should be allowed to change the value. For an instance, without changing that qty ice:inputText, if I change the selected value from the drop down list, a new data set will populate, but from the client side, it shows the previous values for the qty. But bean keeps the real value. If I use a ice:outputText for the qty field, then it shows the exact value. How do I prevent this? What I'm missing?
Thanks.