Remove CSS Style in <a4j:jsFunction>

Question

I have a popupPanel that has to clear form data and reset CSS style upon clicking a graphic image (that has a close button image).

I'm clearing data of the form by doing this:

<a4j:jsFunction name="clearSelection" action="#{userProfileBean.clear()}"/>

I want to know two things: 1) Do 2 events - clearing form data and clearing CSS style in the same function

2) How to remove a CSS property for an element? Currently, there is a colored border

-webkit-box-shadow: 0 0 5px rgba(231, 41, 61, 1); 

set for form input elements. I need to remove this style.

Thanks, JSF Newbie

Answer 1

I'll start from the end.

RichFaces use jQuery so you can use its CSS manipulation methods. In your case:

$('#inputId').css('-webkit-box-shadow', '');

Note that if the input id looks like j_idt100:j_idt103 you need to escape the colon - j_idt100\\:j_idt103, though if you have multiple elements to handle it would be easier to give them the same class.

As for the two things with one function, you cannot do that in this case. However there is nothing preventing you from executing two functions.

Assuming you trigger "clearSelection" with in @onclick you can put another function in there

onclick="clearSelection(); clearCSS();"

Alternatively you can chain those

<a4j:jsFunction name="clearSelection" oncomplete="clearCSS()" …/>