OFBiz › OFBiz - Dev

[jira] Created: (OFBIZ-3650) XHTML Validation - Form Widget with type= list|multi and separate-columns="true" renders bad markup

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

2 messages Options

Nicolas Malin (Jira)

[jira] Created: (OFBIZ-3650) XHTML Validation - Form Widget with type= list|multi and separate-columns="true" renders bad markup

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.

Nicolas Malin (Jira)

[jira] Closed: (OFBIZ-3650) XHTML Validation - Form Widget with type= list|multi and separate-columns="true" renders bad markup

[ https://issues.apache.org/jira/browse/OFBIZ-3650?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Blas Rodriguez Somoza closed OFBIZ-3650.
----------------------------------------

Resolution: Later

working on it

> 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.