XHTML Validation - Form Widget with type= list|multi and
separate-columns="true" renders bad markup
---------------------------------------------------------------------------------------------------
Key: OFBIZ-3650
URL: https://issues.apache.org/jira/browse/OFBIZ-3650
Project: OFBiz
Issue Type: Bug
Components: framework
Affects Versions: SVN trunk
Reporter: Blas Rodriguez Somoza
Fix For: SVN trunk
Widgets with separate-columns="true" could generate bad markup.
The problem exists in the header and item rows
For the item rows:
ModelForm.java (lines starting at 1269)
if (innerFormFields.size() > 0) {
// TODO: manage colspan
formStringRenderer.renderFormatHeaderRowFormCellOpen(writer, context, this);
Iterator<ModelFormField> innerFormFieldsIt =
innerFormFields.iterator();
while (innerFormFieldsIt.hasNext()) {
ModelFormField modelFormField =
innerFormFieldsIt.next();
if (separateColumns ||
modelFormField.getSeparateColumn()) {
formStringRenderer.renderFormatItemRowCellOpen(writer, context, this,
modelFormField, 1);
}
// render title (unless this is a submit or a reset
field)
formStringRenderer.renderFieldTitle(writer, context,
modelFormField);
if (separateColumns ||
modelFormField.getSeparateColumn()) {
formStringRenderer.renderFormatItemRowCellClose(writer, context, this,
modelFormField);
}
if (innerFormFieldsIt.hasNext()) {
// TODO: determine somehow if this is the last
one... how?
if (!separateColumns &&
!modelFormField.getSeparateColumn()) {
formStringRenderer.renderFormatHeaderRowFormCellTitleSeparator(writer, context,
this, modelFormField, false);
}
}
}
formStringRenderer.renderFormatHeaderRowFormCellClose(writer, context, this);
}
and from htmlFormMacroLibrary.ftl
renderFormatHeaderRowFormCellOpen translates to "<td ....>"
renderFormatItemRowCellOpen translates to "<td .....>"
renderFormatItemRowCellClose translates to "</td>"
renderFormatHeaderRowFormCellClose translates to "</td>"
if the conditions (innerFormFields.size() > 0) and (separateColumns ||
modelFormField.getSeparateColumn()) are meet then the rendered markup will be:
<td>
<td>...field </td>
<td>...field </td>
...
</td>
Which is a wrong markup code.
The browser usually will close the first duplicated <td> creating a new cell
and remove the duplicated </td>.
Due to this error, a phantom column will appear in the list (see the forum list
in Content -> Forum)
The only solution I know for this issue maintaining the form parameter names,
needs some javascript.
The idea is you need two forms, the master one hidden which is outside the
table and will be used for the submit and another one which is the parent of
the table and contains the input/select/submit etc for each row.
When a row submit button is clicked, it call a javascript function which copies
the values from the row to the master form and submit it.
The following is an xhtml page implementing this idea.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html>
<head>
<title>Table with editable rows</title>
</head>
<body>
<form name="rowList" action="">
<input type="hidden" name="rowId" value=""/>
<input type="hidden" name="field1" value=""/>
<input type="hidden" name="field2" value=""/>
<input type="hidden" name="field3" value=""/>
<input type="hidden" name="field4" value=""/>
</form>
<script type="text/javascript">
function submit_rowList(rowId, ele1, ele2, ele3, ele4)
{
base_form = document.forms['rowList'];
table_form = document.forms['rowList_table'];
base_form.rowId.value = rowId;
base_form.field1.value = table_form.elements[ele1].value;
base_form.field2.value = table_form.elements[ele2].value;
base_form.field3.value = table_form.elements[ele3].value;
base_form.field4.value =
table_form.elements[ele4].options[table_form.elements[ele4].selectedIndex].value;
base_form.submit();
}
</script>
<form name="rowList_table" action="">
<table>
<tr>
<td>
<input type="text" name="field1_0" value="A0"/>
</td>
<td>
<input type="text" name="field2_0" value="B0"/>
</td>
<td>
<input type="text" name="field3_0" value="C0"/>
</td>
<td>
<select name="field4_0">
<option selected="selected">choose
1</option>
<option>choose 2</option>
</select>
</td>
<td>
<input type="button" name="boton_0"
onclick="javascript:submit_rowList(0,'field1_0','field2_0', 'field3_0',
'field4_0');"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="field1_1" value="A1"/>
</td>
<td>
<input type="text" name="field2_1" value="B1"/>
</td>
<td>
<input type="text" name="field3_1" value="C1"/>
</td>
<td>
<select name="field4_1">
<option>choose 1</option>
<option selected="selected">choose
2</option>
</select>
</td>
<td>
<input type="button" name="boton_0"
onclick="javascript:submit_rowList(1,'field1_1','field2_1', 'field3_1',
'field4_1');"/>
</td>
</tr>
</table>
</form>
</body>
</html>
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
