I am displaying a list of items using spring webflow.
Each item has an edit button; clicking the button opens up a modal dialog.
If there are 12 items in the list,
I see 12 commas generated in the form path.
How can I avoid generation of commas?
<c:forEach var="note" items="${model.modelname}">
//create a click button for each item
//each click opens up a modal
<div id="modal" class="hidden">
<div class="modal-body-content">
<form:textarea path="textPath" />
</div>
</div>
</c:forEach>
There are several issues at work.
As noted by #dbreaux,
all of your textarea elements are in the same form and have the same id;
this is causing the commas when you post the form.
The element id is supposed to be unique to each element. Your element id is "modal" is not unique. Make it unique. This is not causing the commas.
The name of each textarea is textPath. Since you have multiple elements with one name, you get a comma separated list of values for that element name when you post the form. Each textarea must have a unique name. It appears that you have a unique name for each modal (the loop variable is the modalName). Use that in the name of the textarea.
If you can't give each textarea a unique name, give each textarea its own form. Generate a new form for each modal div.
Here is an example of the solution I proposed in #2 above (Note: I don't have a system running that uses spring tags ATM, this example is untested):
<c:forEach var="note" items="${model.modelname}">
<div id="modal" class="hidden">
<div class="modal-body-content">
<form:textarea path="${note}textPath" />
</div>
</div>
</c:forEach>
It appears that in a single form, you have multiple textarea fields with the exact same field name ("textPath") (and exact same DOM ID, which isn't good either).
If so, I'm not surprised that Spring combines all the values submitted under that single name, with commas separating them. What Java type is your model bean's textPath field? I think if it were an array or maybe List, you might get the values separated out. But that's just a guess.
Related
I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements
So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.
We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.
I am very new to apex and just start to study how to add validation on the field. I am not able to do this from set up. In more detail I want to assign an id to apex:inputfield. I read a lot of information in the internet such as using partial id like http://www.kineticgrowth.com/javascript-visualforce-jquery-partial-id-selectors/
However know matter what I add in apex page, it doesn't show up inside the string. Here is my code:
<apex:pageBlock id="pageBlock" ...>
...
<apex:dataTable ... id="transTableBrandPurchase" ">
...
<apex:inputField id="eric_test" value="{!varBla}" required="true" />
when I check the browser in html it gets
<input id="j_id0:j_id6:pageBlock:transTableManufacturerPurchase:0:j_id273" maxlength="255" name="j_id0:j_id6:pageBlock:transTableManufacturerPurchase:0:j_id273" size="20" type="text">
Based on Salesforce reference I should get id="j_xxx:j_yyy ...:pageBlock:transTableManufacturerPurchase:eric_test"
People may say that I can just use "pageBlock:transTableManufacturerPurchase", I cann't because in this page we display then rows and the other rows look like similar:
<input id="j_id0:j_id6:pageBlock:transTableManufacturerPurchase:0:j_id275" name="j_id0:j_id6:pageBlock:transTableManufacturerPurchase:0:j_id275" >
Right now I am working on validation in visualforce page with Jquery.
My approach to assigning ID to elements in VF page is, give ID to all apex elements. Then use chrome inspect element option to find exact ID.
If you are using salesforce any repeat tags , , etc, salesforce will add additional numbering on your ID, to make sure that all elements have unique ID.
Is there a way to easily create a readonly version of JSP form in Spring?
i.e., I have a command object that's filled and if I show it as a form it works great, all the selects and radiobuttons get bound properly. However, my command object only holds id's of properties, not labels (i.e. and id from a select or a radiobutton list that gets bound on JSP load).
What I'd like to do is make a read only version where there'd be just a label - value list, without html objects such as inputs, selects and such.
So basically, in an edit version, there'd be something like
<form:select path="type.id" id="type">
<form:options items="${types}" itemLabel="name" itemValue="id"/>
</form:select>
but in the read only version I'd like to be able to automatically print only the exact type.name that got selected, i.e.
<c:out value="${commandName.type.name}"/>
Is there such a possibility, or do I have to mess with this in controller?
Ok so I guess there's no elegant way of matching IDs and values from model with IDs in command. Instead of doing extra work in controller, I matched the IDs on JSP, i.e.
<c:forEach var="type" items="${types}">
<c:if test="${type.id == commandName.type.id}">
<c:out value="${type.name}"/>
</c:if>
</c:forEach>
It's a bit extra work, but I'd rather do this than have a number of iterations over a List in my controller.
I am having a strange issue in Firefox 3.5.2 with F5 refresh.
Basically, when I focus on an input field and hit f5 the contents of that input field gets copied to the next form field after the F5 refresh.
But, if you inspect the HTML source code, the values are correctly loaded.
I am not having this issue in IE8 or Safari 4.0.3.
The problem does not occur if I do a hard refresh or run window.location.refresh(true).
After F5 Refresh: http://i805.photobucket.com/albums/yy339/abepark/after.jpg
Here's an overview of what's going on.
I believe the thing you should look into is the autocomplete attribute,
you should set it to off on the input box. However be careful since this will trigger two effects.
When you refresh the page it won't remember the old values
The default dropdown of the already used values on that input box will also be disabled.
If you want to keep the second behavior you should set the autocomplete attribute back to on with JS.
Browsers can remember form field contents over a refresh. This can really throw your scripting off if it is relying on the initial value of a field matching what's in the HTML. You could try to prevent it by calling form.reset() at the start.
Different browsers have different strategies for detecting when a form or a field is the same as in the previous page. If you have clashing names, or names that change on reload, it is very possible to end up confusing them. Would have to see some code to work it out for sure.
In the backend, I am using ASP.NET MVC 1.0 with the Spark View engine. When I examine the source code after an F5 refresh in Firefox 3.5.2, the page renders correctly; however, if you look at the page visually the adjacent form field field gets populated with the value from the previous field.
I included enough code so you can just get an idea of what I'm trying to do.
Again, the rendering is fine and the final view/HTML code is fine. It's what I see on the screen that is incorrect. I am using hidden vars; but the issue occurred before using it as well.
Note in the code below, I have 2 distinct ID fields: "date_{projectTask.ProjectTaskId}" and "finishDate_{projectTask.ProjectTaskId}, which gets renders to something like "date_1" and "finishDate_2".
<table>
<for each="ProjectTask projectTask in projectTasksByProjectPhase">
<input type="hidden" value="${projectTask.ProjectTaskId}" />
<tr>
<td class="date">
<div class="box">
<div class="datefield">
<input type="text" id="date_${projectTask.ProjectTaskId}" value="${startDate}" /><button type="button" id="show_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
<td>
<div class="box">
<div class="datefield">
<input type="text" id="finishDate_${projectTask.ProjectTaskId}" value="${finishDate}" /><button type="button" id="finishShow_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
</tr>
</for>
</table>
FYI: ${} are used to output variables in the Spark View engine.
I am also using the YUI 2.7 Connection to make Ajax calls to update the datebase for "change" and "enter/tab key press" events. I am able to verify that the AJAX calls are made correctly and the form field values are still valid.
The problem occurs when I just do a F5 refresh; for some reason, the "finishDate_1" gets populated with the value from "date_1".
This problem occurs just by clicking on "date_1" and hitting F5; so, the adjacent field just gets populated even if there are no AJAX calls.
Here's the Javascript code I call towards the end of the body"
YAHOO.util.Event.onDOMReady(
function() {
var idList = YAHOO.util.Dom.getElementsBy(function (el) { return (el.type == 'hidden'); }, 'input');
len = idList.length;
var startDatePickers = new Array();
var finishDatePickers = new Array();
for (var i = 0; i < len; i++) {
var id = idList[i].value
startDatePickers[i] = new DatePicker("date_" + id, "show_" + id, "cal_" + id);
startDatePickers[i].valueChanged.subscribe(updateDate, 'S');
finishDatePickers[i] = new DatePicker("finishDate_" + id, "finishShow_" + id, "finishCal_" + id);
finishDatePickers[i].valueChanged.subscribe(updateDate, 'F');
}
}
}
The form field gets copied over before any Javascript code is processed because I call the Javascript code towards the end of the body after all HTML is rendered. So, I'm guessing it's a refresh issue in Firefox? What do you guys think?
As you can see above, I created my own calender date picker objects which allows you to either enter the date in the text manually or by clicking on a button to view the calendar and select a date. Once you enter or select the date, an AJAX call will be made to update the datebase in the back end.
Thanks everybody for the quick responses.
#Anonymous: whoever you are, you are awesome!
#bobince: thanks for the feedback as well.
I added a dummy form tag with the attribute autocomplete="off" and that solved the problem!
I was scratching my head because I didn't get this issue in Safari 4.0.3 or Internet Explorer 8.
<form action="" autcomplete="off">
<!-- my code -->
</form>
The values were loading correctly in the back end (ASP.NET MVC 1.0/Spark View engine) and the HTML source code reflected this, but the input field values were not getting populated correctly. I was using the YUI Connection Manager and Javascript to support edit-in-place and the date pickers.
I tried changing the XHR call to a GET call instead of POST and the same issue was happening.
Anyway, the problem was that the Firefox was not setting the correct values for the input fields for F5 refreshes.
Again, thanks so much! You guys rock!
All element id's must be unique, if two elements have same id's then that could be reason why Firefox inserts same values to elments that didn't orginally have those values entered.
I had a similar problem related to my question at Input control shows incorrect value, even 'though inspect element shows the right value is there
The problem occurred for me in Firefox, but not Chrome, for some but not all controls on the form, and when I pressed F5, but not ctrl-F5.
The "dummy form" seems to have resolved it for me.