Setting the CSS Style Property for a Text Contorll dynamically

, ,
1

Hi All,

I have a problem encountered when setting the CSS style Property of a Text Control dynamically through Javascript.

Below is the code i am using to set the CSS Style Property dynamically.

CAF.model(“{activePageBean.clientIds[‘xxxxxxxxxx’]}”).setStyle(“border:solid 2px #ff0000”);

FYI,

I have placed the above script for an OnClick event of an Async Command button, due to this script failure i am not able to proceed further.

Please help me on the above.

It would be great if some one can tell me how to use the “document.getElementById(” xx").style.border=solid 2px #fff000" instead of the CAF.model or with the CAF.model.

Thanks in Advance.

2

First, make sure the Output Text control has the ‘Raw’ property set to false. This ensures that there will be a tag wrapped around the text with the id that can be referenced from javascript.

Next, there is no setStyle method in the CAF.Output.Model, so you would want to use the API from the prototypejs library (see [1]) instead with something like this:


//lookup element by id
var element = $("#{caf:cid('controlIdHere')}");
//change the CSS styles of the element
element.setStyle({
    border: "solid 2px #fff000"
});
  1. [url]http://api.prototypejs.org/dom/Element/prototype/setStyle/[/url]