Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

[Solved] JavaScript Watermark on Silver Stripe Search Textbox


8 Posts   2168 Views


16 July 2010 at 4:58am (Last edited: 18 July 2010 5:06am), Community Member, 25 Posts

I am trying to implement a JQuery watermark on the textbox dynamically created by Silver Stripe $SearchForm. Without any success.

The search form is located in the header of the file located in my themes folder.

Here is my code:

class Page_Controller extends ContentController {
   public static $allowed_actions = array (

   public function init() {
      // Stylesheets
      if($pos = strpos( $_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) ) {
      // JavaScript

   $("#SearchForm_SearchForm_Search").Watermark("Search the DEA");


16 July 2010 at 9:55am Forum Moderator, 5511 Posts

Do you get any javascript errors to your browser? Are the watermarkinput.js and dea.js files being loaded correctly on the front end (not 404ing or anything).


16 July 2010 at 1:51pm Community Member, 25 Posts

I am receiving this error: $("#SearchForm_SearchForm_Search").Watermark is not a function

Line 2


16 July 2010 at 2:56pm Community Member, 25 Posts

Both files are being loaded. This is so weird.


17 July 2010 at 2:52am Community Member, 25 Posts

I got it to work.

For whatever reason changing my dea.js file to:

;(function($) {
$(document).ready(function() {
$("#SearchForm_SearchForm_Search").Watermark("Search the DEA");

fixed it.

I have no idea why this worked, but it did.

If someone could shed some light on this for me, that would be appreciated.


17 July 2010 at 10:41am Forum Moderator, 5511 Posts

Well thats called a javascript closure ( and its used to encapsulate the $ to prevent it conflicting with prototype. You should write all your JS with that, though normally you would of had an error to your console if it was conflicting previously.


18 July 2010 at 5:06am Community Member, 25 Posts

Cool. Thanks for your response. Now I know to always use the JavaScript enclosure and I should never have this problem again.

Cheers :)


25 September 2010 at 5:15am Community Member, 14 Posts

I am having the same problem. I did manage to solve it thanks to your work on this, but had a few questions. I enclosed my custom .js files and that didn't fix the issue. I had jQuery 1.4.2 min included in Page.php. When I removed it from there and included it in things started working.

Please forgive my ignorance, but why is this? Do I need to enclose the whole jQuery file or something?