is it possible to "split" a form?
e.g. i have two forms which would collide (one row of a table needs to stay in form 1, the other in form 2 and so on)
so i need a technique to make this possible like in HTML5 (form="formid")
all black fields must be the same form (content)
and all red fields are also one form together (actions for submit)
I need to be able to access both of them individually, they are just positined like the picture above. unfortunately I cannot make a form of a specific shape which includes some components and others not.
Just use
<ui:repeat>
<h:form>
...
</h:form>
</ui:repeat>
instead of
<h:form>
<ui:repeat>
...
</ui:repeat>
</h:form>
Related
In one div, I've placed a form with two input texts and a button. When the user clicks on the button, the createProject.register method is called and the values of text fields are saved to a database table.
<h:outputText id="opt" value="#{createProject.register}"></h:outputText>
<h:commandButton value="Add URL">
<f:ajax execute="#form" event="click" render="#form dt" listener="#{prTable.refresh}"></f:ajax>
</h:commandButton>
Below the div, there's a datable with the ID dt. To refresh the data in the table, I've added listener="#{prTable.refresh}" to the f:ajax block. The refresh method in the PrTable class updates the arralylist of URLs. The datatable displays the list of URLs.
Problem: When I click on the button for the first time, the table is not refreshed. But, when I click the button 2nd time, the data table gets refreshed. The table doesn't display the current values in the input text field but it shows the values which were saved on the last button click.
How to fix this problem?
Instead of using two different Beans for the table and form, I used one bean. At the end of the function which saved the data, I called the function which updated the ArrayList. I also removed outputtext and listener from the form. This solved my problem.
I have a page where a user can edit a large (~) amount of small items with a very few options, like remove, turn off, turn on and edit name of the item.
I don't know why but the current approach I'm using does not give me the "good code" feeling. I create a form for each action on each item, so I have like 3 forms per item. I feel like forms were meant to submit larger amounts of information.
Fortunately, I found the form* attributes html5 offers (HTML5, yayy!) that kind of allow for this. I created a single delete form on the page and then on each item I added a button, outside of the form.
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
Unfortunately that is not the case with the edit-name form. If I add a single form on the page, then have input elements for the name on every item, like
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
Then on the landing page, item-name will always be the last input's value. I haven't tested this but I am assuming that when submitting the form all input fields pointing to that form with their form attribute are being collected and sent, then on the other side they are all being processed and I'm getting the last one since they all have the same name and are being overwritten.
How, if at all, can I have only a certain input be submitted, depending on which button was clicked, instead of all?
Notice: I can think of hacky ways like including the item id in the input name but it doesn't seem right, also what if there is no id at all.
If a specific button should only post a specific input, then making separate forms sounds like the right way to go.
Your assumption is right, by the way, so another solution would be to put all inputs in the same form, but give them different names, indeed based on an item id. Adding a unique ID or name is the right way to go. After all, how would you know what you are editing if you have no ID? Currently the ID is in the button too, right? You need it.
Anyway, with such a form you can save them all with one click on a submit button.
From a UX perspective, maybe that's a better approach too. Now you would have to do and save each edit separately, which results in a page refresh, which can be annoying and slow.
I would make a form in two versions.
Non-Javascript
The basic form shows all the items to edit, each followed by a group of radio buttons that allow you to update, delete, turn on, or turn off the item.
The form has one big submit button that posts the entire form. All items are updated or their state is changed depending on the radio buttons.
This way, a user can relatively easily edit all items and post their changes without a lot of page refreshes.
JavaScript additions
Using JavaScript/JQuery, you can modify the form. Change the radio buttons to normal buttons and perform the action using AJAX, but only for the item they belong. The big button at the end can be removed, and the form can be altered so it doesn't submit anymore. This way, a user has a rich interaction without the nuisance of the page being constantly reloaded.
I have a master detail resultset that I present on a datatable.
The detail is fetched and rendered within to be combined into a single output string that remains in one column.
<p:column>
<f:facet name="header">BF Order Contents</f:facet>
<ui:repeat value="#{order.listOfOrderDetails}" var="orderitem" varStatus="orderitemstatus" >
<h:outputText value="#{orderitem.product.brand.name}-#{orderitem.product.name}#{orderitemstatus.last ? '':', '}" />
</ui:repeat>
</p:column>
On the datatable, that column displays as "Some Brand-Some Product, Other Brand-Other Product"
But when I export to EXCEL, I see:
com.sun.faces.facelets.component.UIRepeat#783622ba
in that column.
Does anyone have any idea about how I can overcome this (within xhtml only). I don't want to alter the backing bean to produce the detail string.
BTW: I'm on PF3.2, Mojarra 2.1.8, EL 2.2.1-b04, JDK1.7, Tomcat7
Thanks
It can be solved in the below manner.
Column having ui:repeat should not be made exportable i.e set exportable="false" attribute for p:column.
Add one more column to display the string property (write bussiness logic to convert list of string to a comma seperated string and set it the string property)
set the style as display:none; for the new column.
so during ui display, the previous column will display and during export the new column will be displayed showing comma seperated list.
I really don't think its possible , even with overriding the exporter class in the primefaces sources it will be way to complicated...
You probably better alter the backing bean
Also, you can add a star on a bit related an issue opened by me Feature request: Datatables custom filter function - filterFunction (like sortFunction for sort)
You can write a facelet function that does the iteration in Java and returns a string.. this will work just put it to outputText, or do 2 columns one put exportable false and the other make CSS display:none
I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.
I have a multiple select box, which upon previous information entered is populated and then selections can be made. Right now it is being populated but not in the exact way as I intended.
In my JSP it is setup as:
<html:select property="fields" multiple="true" style='width:200px;'>
<html:options property="fields"/>
</html:select>
In my Form class "fields" is an ArrayList that in my Action class I add values too. What I want to be able to do is have those values be the choices for the box, and then be able to read whatever values the user selects from that box. It seems right now that the values are being put in there but are also being "selected". I figure what I have will just need some tweaking but I'm a little confused.
Thanks for the help
I was able to get this partway working:
<html:select property="fields" multiple="true" style='width:200px;'>
<html:options property="fieldsOptions"/>
</html:select>
Where fieldsOptions is an ArrayList I add values to in my Action class, and fields is a String[] in my form, my problem now is after I select options I want to be able to see these selections and I assumed they would just be put in "fields" but it doesnt seem that is the case, am I maybe just not accesting it right.