Quick and Easy: A Better Way to Use jQuery to Hide a Text Field on a SharePoint Form
This is another post in Paul Galvin’s 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.
Paul Galvin, Microsoft MVP – SharePoint
Web site: Paul Galvin’s SharePoint Space
Paul is a Solutions Architect currently working most closely with Microsoft Office SharePoint Server 2007. He was recently awarded Microsoft MVP – SharePoint status for his work with the SharePoint community.
- Quick and Easy: Use jQuery to Set A Text Field’s Value on a SharePoint Form
- Quick and Easy: Create Your Own jQuery Sandbox for SharePoint
- Quick and Easy: Use jQuery to Hide a Text Field on a SharePoint Form
- Quick and Easy: A Better Way to Use jQuery to Hide a Text Field on a SharePoint Form
- Securing SharePoint List/Document Library Views Seems (sort of) Possible with jQuery
I’ve been using basically this:
$(’nobr:contains(”Hide Me!”)’).closest(tr).hide();
Enjoy,
Nathan
Where do you drop this piece of code to get things to work?
great article. I have iPhone app that pulls contact web parts in and formats them to look good. It only shows last name since that is primary key field, so I might see several ‘Jones’ on my phone. Is there way in jQuery to concatenate Last/First Name at runtime and show in list so I see whole name?
I have tried to use all 3 methods on my NewItem page, but it only works for text field.
How do I select DropDown? I noticed that SharePoint adds some text to Title, for example for my “Status” field SharePoint lists “Status: Specify your own value:” as title. Plugging that in the code didnt really work…Any ideas?
@Arkadiy:
Try replace ‘input’ with ’select’
To hide a datepicker field:
$(’tr:has(input[title=PAAdminStartDate])’).not(’tr:has(tr)’).parents(’tr:first’).hide();
Where do you drop this piece of code to get things to work?
Any ideas for dropdown content type?
thanks