I'm using JSF2.1 with PrimeFaces 4.0 and surprisingly I'm unable to find a simple solution, how to disable a field if another field is already filled instead. E.g. if I enter a number in the "plus quantity" field and I leave the field by clicking or using tab, the "minus quantity" field should be disabled.
All I found is to do something like this
<p:inputText id="minusQty" disabled="#{not empty order.plusQty}"/>
<p:inputText id="plusQty" value="#{order.plusQty}">
<f:ajax update="minusQty" />
</p:inputText>
but I find it a bit heavy to call the server for such a simple task. I also don't want to add custom JS code. I guess there's a built-in way in JSF/PF but I cannot find it...
but I find it a bit heavy to call the server for such a simple task
Measure it instead of making assumptions.
I also don't want to add custom JS code
It boils down to just using the right tool for the job. The code which you've so far looks okay, apart from the <p:ajax> and <f:ajax> mixup (the <f:ajax> doesn't support update attribute). I'd only use <p:ajax partialSubmit="true"> to reduce request payload, especially if this is part of a relatively large form.
Might you eventually go in the JS direction, keep in mind that enabling/disabling a HTML DOM element in client side doesn't enable/disable the JSF component in server side. In other words, when you do so with pure JS, then hackers will still be able to submit the value anyway. Always keep this in mind when considering either client or server side for some tasks.
Related
I got a form, that includes outputPanel that I need to update, excluding one of its component (it containts calendar, that resets after I call update, I want to prevent that)
<p:ajax update=":form1:outputPanel1 :not(form1:outputPanel1:nestedOutputPanel)"/>
But I have no idea how can I achieve something like this (above example is not working)?
The PrimeFaces update attribute takes one or more expressions separated by a space (or comma). Normally (in plain JSF) those expressions are client IDs, but in PrimeFaces you can also use selectors. A selector is executed and results in a list of client IDs to update. You could use a selector to select all the components that need to be updated and exclude the component you don't want to update.
You could add a style class to the component you want to exclude and use something like:
update="#(.parent :not(.exclude))"
As you can read in the top answer on the linked question, the #(...) selector will be used as a jQuery selector. So you can easily test selectors in your browser's JavaScript console as $("...").
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?
I have sth like this:
<a4j:repeat value="#{results}" var="hdr" rowKeyVar="idx">
<rich:dataTable var="item" value="#{results}" id="tbl#{idx}" first="#{idx}" rows="1">
<a4j:commandButton value="update this table only" reRender="tbl#{idx}" />
</rich:dataTable>
</a4j:repeat>
When I check from the output html, the data table has id like form:0:tbl that has no idx at the end.
The reRender will work when there is only one row in the results.
So here comes some questions:
Why doesn't dataTable's id works with EL expression while the "first" attribute works nicely?
How does reRender work that even I just specify tbl it can still be resolved while the actual HTML id is something longer like form:0:tbl? (if I know how does reRender work, I maybe able to hack it to work with a4j:repeat...)
Is there any technique or workaround that I could use to refresh only a specific dataTable that is inside a4j:repeat?
In fact I have successfully reRendered the whole a4j:repeat block surrounded by s:div. But refreshing the whole block would reset the scrollbar so it isn't desired....
For 1, it is possible that the life cycle of the table is in a different phase.
For 2, it refers to UIComponent.findComponent in fact for looking up a component given an ID.
For 3, perhaps try to use UIComponent.findComponent() or #{rich:clientId('id')} to see whether the actual HTML element ID of the a4j:repeat embedded rich:dataTable to be retrieved.
If yes, then somehow reRender can be made to work. If no, look if there is anything that can override how reRender looks for component.
Okay latest experiment shows that simply using the rich:dataTable id can do.
Keys to remember:
Inside a4j:repeat, the absolute name of the id of dataTable will have something like :0: :1: for the corresponding index.
However, to locate it, simply using the same id as defined in rich:dataTable is okay. Don't append any suffix at the end.
When observing the ajax data from Chrome, the reRendered portion is just the same related dataTable of the component.
Conclusion, think too much, failed to try the simplest solution at the start.
A project was passed onto me a short while ago which uses JSP for the view and spring 3.1 for the controller - both of which I have little experience in and as per usual, there are about 4 comments in the whole thing. Anyway, my issue is this, in replacing a
<form:checkboxes path="class.list" items="${items}" delimiter="<br />" />
With
<c:forEach var="item" varStatus="vs" items="${items}">
<form:checkbox path="class.list" item="${item}" />
// check if nesting is required, if so create div and nested list point to class.list.children
</c:forEach>
Seems to create additional elements in my class.list which are not selected leading to a break further on.
Any guidance would be greatly appreciated.
I would suggest leaving the form:checkboxes intact as it is a compact way to generate checkboxes. I do not know of a compelling reason not to use the spring form tags if it is already in place and working. As to why you are seeing hidden fields. See here:
http://static.springsource.org/spring/docs/2.5.x/reference/view.html
Here is the relevant portion:
What you might not expect to see is the additional hidden field after each checkbox. When a checkbox in an HTML page is not checked, its value will not be sent to the server as part of the HTTP request parameters once the form is submitted, so we need a workaround for this quirk in HTML in order for Spring form data binding to work. The checkbox tag follows the existing Spring convention of including a hidden parameter prefixed by an underscore ("_") for each checkbox. By doing this, you are effectively telling Spring that “ the checkbox was visible in the form and I want my object to which the form data will be bound to reflect the state of the checkbox no matter what ”.
Hope this helps.
I have validation on all areas of a form, and within the inputs I have hints which are set in the input's Value.
However, the problem I have is that CodeIgniter see's the input as being filled in so a Validation error doesn't occur.
I know I can create a callback_function for each input, but with around 10 forms and 100 inputs I was hoping to avoid this and possibly create a generic function or rule?
Any help is greatly appreciated
You seem to be setting default values for your inputs when what you really want is a placeholder
So instead of this:
<input value="Enter your email" />
You want this:
<input placeholder="Enter your email" />
Depending on how you are setting up your input data, a single callback function could suffice if you really needed it, but really: Don't start hacking up Codeigniter for this. Just use placeholder as it was intended (see javascript solutions for older browsers).
Read more about it here:
http://diveintohtml5.ep.io/forms.html#placeholder
I am assuming what you mean is this:
Ghosted Values http://img864.imageshack.us/img864/8124/ghosted.png
Where the value in there is never meant to be the actual value?
The easy solution is to have a class on the <input> that indicates that it's using a stock input (and also it can grey the text out). When the user clicks in the field javascript can clear the initial value out for you (and remove the marker class).
You can then on the submit button click event go through the form and clear the values of anything with the marker class before you actually submit the form.
the problem I have is that I have two sets of values in a drop down list. If type 'A' is selected I want a text box to be populated with a value from the database and be read only. If Type 'B' is selected the box is to be empty and editable.
My original code is written in jsp/struts and I have sort of achieved this by using
onchange="javascript:submit()" to reload the page, but this has the obvious drawback of saving any changes you have made which means you can't really cancel.
I also have other problems with the serverside validation due to this method.
Is there a way of making a jsp page reload on change, that way I could write javascript to change the way the page looks according to the values held in the session. That way the save/submit function will only be called when the page has properly been filled out and the server side validation will work as designed.
I know that this is something that AJAX is good at doing but I am trying to avoid it if possible.
AJAX is your only other option my friend, unless on the original page load you load all the other possible values of the Text Box so you don't need to go back to the database. Well, you could try putting the text box in an IFRAME, but you will probably run into more problems with that approach than just going with AJAX.
Without AJAX what you are asking is going to be difficult. Another option (which is ugly) is to write out all possible values for the second list box into a data structure like an array or dictionary.
Then write some javascript to get the values from the data structure when the user selects from the first list box. The amount of javascript you will have to write to get this done and to do it correctly in a cross browser way will be much more difficult than simply using AJAX.
Not sure why you'd try to avoid AJAX in today's world, the JS libraries out there today make it so simple it's crazy not to try it out.
I just had to replace a page that was written as Vincent pointed out. I assume at the time it made sense for the app, given the relative size of the data 4 years ago. Now that the app has scaled though, the page was taking upwards of 30 seconds to parse the data structures repeatedly (poorly written JS? maybe).
I replaced all the logic with a very simple AJAX call to a servlet that simply returns a JSON response of values for the 2nd drop down based on what was passed to it and the response is basically instant.
Good luck to ya.
One way is to change the form's action so that you submit the form to a different url than the "save" url. This lets you reload certain aspects of the form and return to the form itself, instead of committing the data.
<script>
function reload() {
document.forms[0].action="reloadFormData.jsp";
document.forms[0].submit();
}
</script>
<form action="saveData.jsp" method="post">
<select id="A" name="B" onchange="reload()"><!-- blah --></select>
<select id="B" name="B"><!-- blah B --></select>
<input type="submit">
</form>
If I understand you correctly, that you want either a dropdown (<select>) or a textfield (<input type="text">) depending on a choice (typically a checkbox or radiobuttons) somewhere above in a form?
I that case you may need to handle the two types of input differently on the server anyway, so why not have both the selectbox and textfield in the area of the form with different names and id and one of them hidden (display = none). Then toggle visibility when the choice changes. On the server you pick eiter the selectbox or textarea input (wich will both be present unless you disable (disabled="disabled") them too, wich I think is uneccesary) depending on the choice input.
Of course if you expect that the user usually just need the text-input, and a few times only, needing a massive list; it would be better to use ajax to retrieve the list. But if it's the other way around (you need the text-field only occationally), as I assumed above, it will be faster to have both present in the initial form.
If the drop down only contain easily generateable data, like years from now to houndreds of years back it could even be much faster (requiring less bandwidth on the server) to generate the data client side using a for loop in Javascript.
I know a taglib that can fit to your problem:
AjaxTags.
I use this taglib in my J2EE projects and it is very simple to integrate it into web applications.
This taglib give you several tags designed to execute AJAX request in your jsp files.
Here is the description of each tags: http://ajaxtags.sourceforge.net/usage.html
The tag which will help you is the ajax:select tag. It allows you to populate a select tag which depends on an other field without reloading the entire jsp page.
If you more informations about it, ask me and i'll try to answer quicky.
Along the lines of what Strindhaug said, but if you need dynamic data:
Could you have the backend write JS into the page, and then the JS would change the form as required? The backend could propagate some variables for descriptions and such, and then the JS could change/update the form accordingly. If you aren't familiar with this, libs like jQuery make things like this easier and more cross-browser than rolling-your-own (at least in my experience).
Aside:
If you're not using AJAX because it was hard to code (as I didn't for a while because my first experience was from scratch and wasn't pretty), as others have said, libs like MooTools and such make it really easy now. Also, there is not shame in using AJAX properly. It has a bad rap because people do stupid things with it, but if you can't simply write premade values into the form or you have to do live look ups, this is one of AJAX's proper uses.