Quick and Easy: A Better Way to Use jQuery to Hide a Text Field on a SharePoint Form

This is another post in my on-going series on how to use jQuery with SharePoint.
If you want to learn more about jQuery, I highly recommend: jQuery in Action by Bear Bibeault and Yehuda Katz.

Previously, I wrote about how to use jQuery to locate and hide a text field on a form.  I didn’t care for the specific approach (I was chaining parents – that’s simply isn’t done these days, at least in families of quality). 

When I first started to think about it, I knew I needed to find a <TR> to which I could invoke the hide() method.  My early effort to find the correct <TR> was something like this:

$('tr:has(input[title=Hide Me!])');

The problem with that is that it would find every <TR> tag that had any parent relationship to the Hide Me! field, even if Hide Me! is nested many levels deep in <TR>’s.  It turns out that on my sandbox form, that expression finds 9 different TR’s who have Hide Me! as a child somewhere in its DOM tree.  I realized that I could walk back up the tree from the input field itself, so that’s how I ended up abusing parents, but it didn’t sit well with me.

I gave some thought to this and one of the things I read finally made sense: I could use the not() method to trim out <TR>’s I don’t want in my wrapped set.  That led me to this:

$('tr:has(input[title=Hide Me!])').not('tr:has(tr)').hide();

The first bit finds all the <TR> tags that have the Hide Me! field anywhere in their own hierarchy.  It then strips out any <TR> that also have a child <TR>.  This leaves us with a single <TR> that:

1) Has no <TR> child records

2) Does have the input field as child. 

We can then apply the hide() method to the resulting set and we’re done.

I’m still a bit nervous about this, but not as nervous as chaining parents.

I don’t know if this is a best practice or not.  There may be a more appropriate way of identifying just the <TR> that we care about in a SharePoint form.  If you know, please post a comment.



Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

2 thoughts on “Quick and Easy: A Better Way to Use jQuery to Hide a Text Field on a SharePoint Form

  1. Pingback: Hide a field in a SharePoint edit form based on other values « jbmurphy.com

Leave a Reply

Your email address will not be published. Required fields are marked *