[TOMAHAWK-1394] s:tableSuggestAjax - s:outputText 'forValue' attribute works only with html SELECT tags

• Type: Improvement
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: 1.1.8
• Component/s: AJAX Form Components
• Environment: Tomahawk 1.1.8, Tomahawk Sandbox 1.1.9 SNAPSHOT
• Assignee: Unassigned
• Reporter: Berinde Razvan
• Created: 17/Feb/09 17:15
• Updated: 17/Feb/09 17:15

Description

I've used the tableSuggestAjax tag.
I wanted to place an inputHidden tag in order to input the id from my Accounts and not their names in order to search the database faster.

In the Sandbox Tag Library Documentation for the s:outputText tag I found the following explanation for the forValue attribute: "Specify the id of the dom element where the value should be put in. This value is also included in the suggested table, but only in a hidden span element following the span for the label in one row."

The forValue attribute only works with html SELECT tags. Another problem is the fact that you cannot have both "for" and "forValue" attributes in the same outputText tag, but this is not critical.

You can see my code, the source of the problem and a fix for the problem.

Code Snippet:

<t:inputHidden id="accountId" value="#

{Bean.suggestedAccountId}

" />
<s:tableSuggestAjax
var="account"
id="accountName"
startRequest="2"
value="#

{Bean.suggestedAccountName}

"
betweenKeyUp="500"
charset="utf-8"
suggestedItemsMethod="#

{Bean.suggestValues}

"
maxSuggestedItems="10">
<t:column>
<f:facet name="header">
<s:outputText value="Account" />
</f:facet>
<s:outputText
for="accountName"
label="#

{account.name}

" />
</t:column>
<t:column>
<f:facet name="header">
<s:outputText value="Description" />
</f:facet>
<s:outputText
label="#

{account.description}

"
forValue="accountId"
value ="#

{account.id}

" />
</t:column>
</s:tableSuggestAjax>

I wanted to set the account ID in the inputHidden field;

It won't work this way because of the org\apache\myfaces\custom\dojoextensions\resource\widget\TableSuggest.js.

In this JavaScript the following code only works with select tags and not input tags.

Mainly the second if "else if (column.forValue) " won't work only with select tags.

dojo.lang.forEach(tgt.suggestData, function(column) {
if (column.forText) {
if (column.forText === this.textInputNode.id) {
this.setAllValues(column.label, column.label);
if (this.textInputNode.onchange)

{ this.textInputNode.onchange(); }
}
else {
var element = dojo.byId(column.forText);
if (element) {
if (element.tagName === "INPUT") {
element.value = column.label;
if (element.onchange)
{ element.onchange(); }
}
else { element.innerHTML = column.label; }
}
}
}
else if (column.forValue) {
var element = dojo.byId(column.forValue);
for (i = 0; i < element.options.length; i++)
{
if (element.options[i].value == column.value) { element.options[i].selected = true; }
}
}
}, this);


I have created a fix for this situation that will also work with input tags.

Here is the fix:

dojo.lang.forEach(tgt.suggestData, function(column) {
if (column.forText) {
if (column.forText === this.textInputNode.id) {
this.setAllValues(column.label, column.label);
if (this.textInputNode.onchange) { this.textInputNode.onchange(); }

}
else {
var element = dojo.byId(column.forText);
if (element) {
if (element.tagName === "INPUT") {
element.value = column.label;
if (element.onchange)

{ element.onchange(); }

}
else

{ element.innerHTML = column.label; }

}
}
}
else if (column.forValue) {
var element = dojo.byId(column.forValue);
if (element.tagName === "SELECT") {
for (i = 0; i < element.options.length; i++)
{
if (element.options[i].value == column.value)

{ element.options[i].selected = true; }

}
}
else if (element.tagName === "INPUT") {
element.value = column.value;
if (element.onchange)

{ element.onchange(); }

}
else

{ element.innerHTML = column.value; }

}
}, this);

The code is tested and works. Can you please include it in one of your releases.