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


Reply

8 Posts   2168 Views

Avatar
w1nk5

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 Page.ss file located in my themes folder.

Here is my code:

Page.php
----------------------
class Page_Controller extends ContentController {
   
   public static $allowed_actions = array (
   );

   public function init() {
      parent::init();   
      
      // Stylesheets
      Requirements::themedCSS('default');      
      if($pos = strpos( $_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) ) {
         Requirements::css("themes/dea/css/ie.css");
      }
      
      // JavaScript
      Requirements::javascript('mysite/javascript/jquery-1.4.2.min.js');
      Requirements::javascript('mysite/javascript/jquery.watermarkinput.js');
      Requirements::javascript('mysite/javascript/dea.js');
   }
}

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

Avatar
Willr

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).

Avatar
w1nk5

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

Avatar
w1nk5

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

Both files are being loaded. This is so weird.

Avatar
w1nk5

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");
})
})(jQuery);

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.

Avatar
Willr

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

Well thats called a javascript closure (http://doc.silverstripe.org/javascript#custom_jquery_code) 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.

Avatar
w1nk5

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 :)

Avatar
patattrash

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 Page.ss things started working.

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