views:

102

answers:

2

Is there a way to DRY this jQuery up?

<script type="text/javascript">
  $('form input#search').watermark('search...');
</script>
<script type="text/javascript">
  $('form input#post_title').watermark('title');
</script>
<script type="text/javascript">
  $('form input#post_tag_list').watermark('tag (separate tags with a comma)');
</script>
<script type="text/javascript">
  $('form input#post_name').watermark('name (optional)');
</script>
<script type="text/javascript">
  $('form input#post_email').watermark('email (optional)');
</script>
<script type="text/javascript">
  $('form textarea#post_content').watermark('message');
</script>
<script type="text/javascript">
  $('form input#comment_commenter').watermark('name (optional)');
</script>
<script type="text/javascript">
  $('form input#comment_email').watermark('email (optional)');
</script>
<script type="text/javascript">
  $('form textarea#comment_body').watermark('reply');
</script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("abbr.timeago").timeago();
  });
</script>

It seems awfully repetitive.

EDIT: I added placeholder elements to all my forms. My app is HTML5 so it's okay. I used this code:

<script type="text/javascript">
  jQuery(function(){
    jQuery("abbr.timeago").timeago();
    jQuery('form input, form textarea').each(
      function(){
        jThis = jQuery(this);
        jThis.watermark(jThis.attr('placeholder'));
      }
    }
  );
</script>

Chrome renders the placeholders with or without JS, while FF 3.6.8 and Opera 10.61 show empty input/textarea boxes. Should I be using $ instead of jQuery(function(){... ? Or does it matter?

note: I'm using jQuery 1.4.2

+7  A: 

If you stored the parameter for the watermark function in the title attributes then you could have something like this;

<form>
    <input type="text" id="search" title="search..." />
    <input type="text" id="post_title" title="title" />
    <input type="text" id="post_tag_list" title="tag (separate tags with a comma)" />
    <input type="text" id="post_name" title="name (optional)" />
    <input type="text" id="post_email" title="email (optional)" />
    <input type="text" id="post_content" title="message" />
    <input type="text" id="comment_commenter" title="name (optional)" />
    <input type="text" id="comment_email" title="email (optional)" />
    <input type="text" id="comment_body" title="reply" />
</form>

<script type="text/javascript">
    jQuery(function(){
        jQuery("abbr.timeago").timeago();
        jQuery('form input, form textarea').each(
            function(){
                jThis = jQuery(this);
                jThis.watermark(jThis.attr('title'));
            }
        }
    );
</script>
Simon
+1 - I would suggest storing the text in the `placeholder` attribute instead of title as that is what the watermark plugin is essentially doing, and modern browsers already support `placeholder`.
Anurag
@Anurag - I thought that the `placeholder` tag/attribute was only available in HTML5? Wouldn't that mean that the OP would need to ensure that his entire site is HTML5 compliant?
rockinthesixstring
@rockinthesixstring - HTML5 has mostly additions and some deletions/changes, so the entire site is already in HTML and using some newly introduced features is not a problem at all. The benefit of putting placeholder is that the thing just works even without JavaScript.
Anurag
+1 - New fields added will automatically work. Great for automation, although bad for granular control. See Mark's answer too.
Mike Robinson
so I tried: <script type="text/javascript"> jQuery(function(){ jQuery("abbr.timeago").timeago(); jQuery('form input, form textarea').each( function(){ jThis = jQuery(this); jThis.watermark(jThis.attr('placeholder')); } } ); </script>and set the placeholder on every form input and form textarea. But nothing works. Chrome renders the placeholder element but FF 3.6.8 shows empty input/textarea boxes. Any ideas?
+3  A: 

you could store it in an object since you have all ID's you can then do this:

watermarkText = {};
watermarkText.search = 'search...';
watermarkText.post_title = 'title';
watermarkText.post_tag_list = 'tag (separate tags with a comma)';
watermarkText.post_name = 'name (optional)';
watermarkText.post_email = 'email (optional)';
watermarkText.post_content = 'message';
watermarkText.comment_commenter = 'name (optional)';
watermarkText.comment_email = 'email (optional)';
watermarkText.comment_body = 'reply';

$('input').watermark(function() {return watermarkText[$(this).attr('id')] });
$('textarea').watermark(function() {return watermarkText[$(this).attr('id')]});
Mark Schultheiss
isn't that the same amount of code as the original question... except with out all of the unnecessary `<script>` elements?
rockinthesixstring
+1 - Only tag the fields you want. Nice for granularity, but not so great for automation. See Simon's answer too.
Mike Robinson
@rockinthesixstring - not really, one object holds the strings, and only a single selector for each input type.@Mike Robinson - sort of, but this solution does not morf the "title" attribute which is used for hints in browsers on mouse over of input fields, AND the strings are all together in one spot, in the extreeme, you could store the strings in a resource like in a database and extract them/create the string object with the values and easier to manage in maintenance cycles (to me).
Mark Schultheiss