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   2250 Views

Avatar
w1nk5

Community Member, 25 Posts

16 July 2010 at 4:58am

Edited: 18/07/2010 5:06am

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

Forum Moderator, 5513 Posts

16 July 2010 at 9:55am

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

Community Member, 25 Posts

16 July 2010 at 1:51pm

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

Line 2

Avatar
w1nk5

Community Member, 25 Posts

16 July 2010 at 2:56pm

Both files are being loaded. This is so weird.

Avatar
w1nk5

Community Member, 25 Posts

17 July 2010 at 2:52am

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

Forum Moderator, 5513 Posts

17 July 2010 at 10:41am

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

Community Member, 25 Posts

18 July 2010 at 5:06am

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

Community Member, 14 Posts

25 September 2010 at 5:15am

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?