Jump to:

3445 Posts in 1031 Topics by 872 members

Template Questions

SilverStripe Forums » Template Questions » [Solved] JavaScript Watermark on Silver Stripe Search Textbox

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 2152 Views
  • w1nk5
    Avatar
    Community Member
    25 Posts

    [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

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

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

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

  • w1nk5
    Avatar
    Community Member
    25 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

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

    Line 2

  • w1nk5
    Avatar
    Community Member
    25 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

    Both files are being loaded. This is so weird.

  • w1nk5
    Avatar
    Community Member
    25 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

    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.

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

    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.

  • w1nk5
    Avatar
    Community Member
    25 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

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

    Cheers

  • patattrash
    Avatar
    Community Member
    14 Posts

    Re: [Solved] JavaScript Watermark on Silver Stripe Search Textbox Link to this post

    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?

    2152 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.