-2

I am doing a project using primefaces.

In my project i need to change the color of p:watermark(primefaces) when i click the p:commandButton.

I tried but does not work.

Here, I added my tiny code:

Sample Code:

<p:inputText id="userNameField" update="info"/>
<p:watermark for="userNameField" value="#{...}" id="userLabelWaterMarkId"/>

<p:commandButton id="loginButtonId" onclick="showLoginBox();" update="info">
</p:commandButton>

JQuery

 function showLoginBox()
   {
     $(".ui-watermark").css("color", "red");
   }

Any idea?

VenRaj
  • 27
  • 6
  • 1
    i dont see any class for P:watermark as .ui-watermark.is it there in your original code? – Jayababu May 08 '15 at 09:59
  • try $("#userLabelWaterMarkId").css("color", "red"); – captainsac May 08 '15 at 10:01
  • i already tried which u posted.but not this too work. and i saw this .ui-watermark style code in another one stackoverflow thats why i selected.its not my original code. – VenRaj May 08 '15 at 10:04
  • possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – Kukeltje May 08 '15 at 10:46

3 Answers3

0

The ui-watermark class is there in OLD browsers since PrimeFaces uses some backwardscompatibility 'hack' that the jquery-ui watermark does as well. Modern browsers do it differently and need styling differently... For those browsers, your question is a duplicate of the link below.

See also:

Community
  • 1
  • 1
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
-1
$(".ui-watermark").css("color", "red");

Here color represents color of the font. If you need to change background-color use like this.

$(".ui-watermark").css("background-color", "red");

make sure that watermark is having class called .ui-watermark,its not there in the code you posted.

Jayababu
  • 1,641
  • 1
  • 14
  • 30
-1

You should create an on click function like this:

function showLoginBox(){
    $("#userLabelWaterMarkId").css("color", "red");
}

$('#loginButtonId').on('click', showLoginBox())

or

$('#loginButtonId').on('click', function() {

    $('#userLabelWaterMarkId').css('color', 'red');

})

binding JS event inside HTML is not a best practice. You need to create the event binding code in your javascript file.

Ade Viankakrisna Fadlil
  • 92
  • 1
  • 1
  • 5