I am looking to be able to dynamically change background colors on the form to show what required fields that need to be filled out on a drop down.

I am having a problem changing the color of a cell in a table when it in a JSF table. I don’t have problems changing colors for other elements on the form but just a few cells in row - it takes effect because when adding a new row the color shows but doesn’t show for the existing row.

Maybe there is an easier way of doing than what I had to go through to get access to the control…

var inputs=document.getElementsByTagName ('*');
tempLen=var1.length;
for (var i=0;i<inputs>=var1.length) {
if(inputs[i].id.substr(tmpMinusFromEnd-1)==":"+var1){

alert(“found match:”+inputs[i].id.substr(tmpMinusFromEnd-1)+“:”+var1);
return inputs[i];}
}
}
return null;
}

var selValue = CAF.model(“#{activePageBean.clientIds[‘caseTypeSelectMenu’]}”).selected()[0].getValue();
var clientAdvTable=CAF.model(“#{activePageBean.clientIds[‘advPartyDataTable’]}”);
var clientAdvRows=clientAdvTable.list();
var rowCount=0;
var validApRowExists=false;
for (var i = 0; i < clientAdvRows.length; i++) {
rowCount=i+1;
var clientAdvRow=clientAdvRows[i];
var clientAdvTypeID=clientAdvRow.getControlId(“apTypeSelectMenu”);
var ClientAdvType=CAF.model(clientAdvTypeID);
var clientAdvTypeValue=ClientAdvType.getValue();
var clientAdvNameID=clientAdvRow.getControlId(“apNameSelectMenu”);
var clientAdvName=CAF.model(clientAdvNameID);
var clientAdvNameValue=clientAdvName.getValue();
var selValue = CAF.model(“#{activePageBean.clientIds[‘caseTypeSelectMenu’]}”).selected()[0].getValue();
clientAdvTypeIDjs=findVar(‘apTypeSelectMenu’);
clientAdvNameIDjs=findVar(‘apNameSelectMenu’);
if(selValue==“a value” ){
alert(“start”);
clientAdvTypeIDjs.style.backgroundColor=‘#FFCC66’;
clientAdvNameIDjs.style.backgroundColor=‘#FFCC66’;
// testing removing row from form and re-adding it
var temp =clientAdvTypeIDjs.parentNode.parentNode.parentNode.parentNode.cloneNode(true);
clientAdvTypeIDjs.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(clientAdvTypeIDjs.parentNode.parentNode.parentNode.parentNode);
clientAdvTypeIDjs.parentNode.parentNode.parentNode.parentNode.appendChild(temp);
//clientAdvTypeIDjs.parentNode.parentNode.parentNode.removeChild(clientAdvTypeIDjs.parentNode.parentNode);

// clientAdvTypeIDjs.parentNode.parentNode.value=‘’;
// alert(“1”);
// clientAdvTypeIDjs.style.backgroundColor=’ #FFCC66’;
alert(“2”);
clientAdvNameIDjs.style.visibility=“hidden”;
alert(“3”);
clientAdvTypeIDjs.style.visibility=“hidden”;
alert(“done”);
} else {
clientAdvNameIDjs.style.backgroundColor=‘red’;
clientAdvTypeIDjs.style.backgroundColor=‘red’;
}
}

You can use the prototype javascript library (version 1.5.1 in webMethods 7.1.x; see Prototype API Documentation | Home (Deprecated URL)) to simplify some things. In particular, try using Element.up() to find the table, row, or cell element from a control in the table:

var clientAdvTable = CAF.model(“#{activePageBean.clientIds[‘advPartyDataTable’]}”);
var clientAdvRows = clientAdvTable.list();
for (var i = 0; i < clientAdvRows.length; i++) {
var clientAdvTypeID = clientAdvRows[i].getControlId(“apTypeSelectMenu”);
// find table cell
var td = Element.up(clientAdvTypeID, “td”);
// set cell’s bg color
td.style.backgroundColor = “#FFCC66”;
}

Justin

Why doesn’t this work?

var rdbutton = CAF.model(‘#{activePageBean.clientIds[‘rdbutton’]}’);

function changerdcolor()
{
rdbutton.style.backgroundColor=‘green’;
}

Firebug says “rdbutton.style not defined.”

To access actual DOM element use following syntax:

$(“#{activePageBean.clientIds[‘orderIDText’]}”).style.backgroundColor=‘green’;

Brilliant. Thanks Alex.