Jquery Watermark Problem

ftaran · November 19th, 2011, 09:54 AM

hello

im having difficulty with the for watermark script, here is what is output onto the screen:

http://img525.imageshack.us/img525/8...zzzzzzzzzq.jpg

here is the markup:

<script type="text/javascript">

$(function () {
$(':input[type=text], textarea').each(function () {
var newText = 'Please enter your ' +
$(this).parent().prev().text();
$(this).attr('value', newText);
}).one('focus', function () {
this.value = '', this.className = ''
}).addClass('Watermark').css('width', '500px');

});

</script>


<td>Name:</td>
<td><asp:TextBox ID="nameTextBox" runat="server" /></td>
 
<td>User Name:</td>
<td><asp:TextBox ID="userNameTextBox" runat="server" /></td>
 
<td>Address:</td>
<td><asp:TextBox ID="addressTextBox" runat="server" /></td>
 
<td>City:</td>
<td><asp:TextBox ID="cityTextBox" runat="server" /></td>
 
<td>Zip:</td>
<td><asp:TextBox ID="zipTextBox" runat="server" /></td>
 
<td>Home Phone:</td>
<td><asp:TextBox ID="homePhoneTextBox" runat="server" /></td>
 
<td>Extension:</td>
<td><asp:TextBox ID="extensionTextBox" runat="server" /></td>
 
<td>Mobile Phone:</td>
<td><asp:TextBox ID="mobilePhoneTextBox" runat="server" /></td>

Imar · November 19th, 2011, 03:51 PM

Hmmm, not sure what's going on. I compared your code with that from the book and besides some whitespace and the width, I don't see a difference.

Which browser did you test this on? Have you tried another?

Imar

ftaran · November 19th, 2011, 03:57 PM

hi, i fixed that problem but, i need the jquery to only apply on the first load of the page, is there a function for that?
the reason is that when a user selects a name the details are obtained using that name's ID and appended to the textboxes, but because the jquery applies to all the text boxes each time the page loads after the user selects a name the 'please enter etc' is replacing the data obtained from the database after the click and post back of the button.

Imar · November 19th, 2011, 04:13 PM

It depends on how you implement it. If your markup is wrapped in an UpdatePanel, the jQuery code won't fire after a post back.

You could also wrap your jQuery code in a PlaceHolder and then toggle its visibility in the Code Behind, or register the jQuery code programmatically.

Cheers,

Imar