JSP form nested checkboxes - spring

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.

Related

Disable other inputtext on change of one inputtext

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.

Validation strategies with AngularJS

I'm evaluating AngularJS and so far I'm very enthusiastic about it. But there's something missing on the validation front: the available options, such as the built-in mechanisms and the AngularUI initiative, implement validators through directives and, as such, every validation should be declared in the view:
<form ng-controller="SomeController">
<!-- Notice the 'required' attribute directive below: -->
<input type="text" ng-model="user.name" name="uName" required />
</form>
In this example, the view is defining that user.name is required. It's like saying the view defines the proper shape of the model. Isn't it a little backwards? Shouldn't the view reflect the states, including error states when it's the case?
Am I mistaken? I'm wondering if it's possible to apply any validators in the controller, signaling the model's data as valid/invalid, and updating the view accordingly (painting form controls with red, showing error messages, clearing previous errors and so on). I'm assuming AngularJS is powerful enough for this, but in the docs and samples so far I just haven't seen anything like I've described above. Thanks!
I guess its all about perspective. The way I see it is, you are defining a view which contains a form and that form contains an input of type text. It is this text input that you are marking as required. If you note, angular does not care if the text is user.name or user.age or whatever else. Its just associating that text input with required. So its just validating that text input and the model associated with that model is the final result ( the place where the value goes in if the validation passes! ).
Have a look at
http://docs.angularjs.org/guide/forms
for custom form validations, if you want to to be doing validations that are not the default ones.
Since you already know the view that is getting produced in advance ( lets call it at compile time! ) , you can associate all validators in the view and hence wouldnt have to do it in the controller (which perhaps is for run-time validation! ).

How to ignore a default value using the CodeIgniter Validation Helper

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.

Using jstl tags in a dynamically created div

I want to be able to show some data based on criteria the user enters in a text field. I can easily take this data, process the form post, and show the data on another page. However, I want to be able to do it all on the same page - they click the button, and a new div shows up with the information. This doesn't seem too complicated, but I want to use jstl tags to format the data like:
<c:forEach items="${model.data}" var="d">
<tr>
<td><fmt:formatDate type="date" dateStyle="short" timeStyle="default" value="${d.reportDate}" /></td>
<td><c:out value="${d.cardType}"/></td>
</tr>
</c:forEach>
If jstl tags are processed when the page loads, can I use that in this new div? Can I update it via a javascript (using prototype) function to display the proper data? Will I be able to do the same thing if they change the criteria and click the submit button again?
No, you can't. You already said yourself, JSTL only runs at the server side. As you're running this entirely at the client side, your only resort is to use JavaScript to populate the table. I've posted similar answers before here and here with code examples how to populate a table with help of jQuery, JSON, Google Gson and a Servlet. I know that you're using Prototype, but the jQuery syntax should be recognizeable enough to port it to Prototype syntax without any problems.

Reload the page without submitting it back to the server

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.

Resources