How to hide html elements depending on what title they have with jQuery?

Question

I need to hide some elements depending on their title value (it's a SharePoint site and sharePoint adds a guid to all element names and ID's), I saw that with jQuery it is possible to do this quite easily but I don't get it to work.

I saw Get element by title jQuery but it doesn't work for me. A part of my code is:

<script src="/System%20Configuration%20Files/jquery-1.3.2.min.js";  type="text/javascript";></script>
<script src="/System%20Configuration%20Files/jquery.SPServices-0.4.1.min.js";  type="text/javascript";></script>


<script type="text/javascript">  

$("document").ready(function ($) { 

//turn off all hidden fields for different record types, then conditionally turn fields off and on based upon the item level selected
//note that field level GUIDs can change when list columns are added or amended in the list

   var control;


//Progress Status
   control = $("select[title='Progress Status']");
   control.parentNode.parentNode.parentNode.style.display="none";


//Status Change Date
   control = $("select[title='Status Change Date']");

   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";



//Set for Milestone Action which is the default Item Level


//Strategic Objective
   control = $("select[title='Strategic Objective']");
   control.parentNode.parentNode.parentNode.style.display="";


//Strategic Priority
   control = $("select[title='Strategic Priority']");
   control.parentNode.parentNode.parentNode.parentNode.style.display="";


//Performance Measure
   control = $("select[title='Performance Measure']");
   control.parentNode.parentNode.parentNode.parentNode.style.display="none";


//Start Date   
   control = $("select[title='Start Date']");
   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";


//Target Date
   control = $("select[title='Target Date']");
   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";


//Priority
   control = $("select[title='Priority']");
   control.parentNode.parentNode.parentNode.style.display="";


//Percentage Complete
   control = $("select[title='% Complete']");
   control.parentNode.parentNode.parentNode.style.display="";


//Baseline
   control = $("select[title='Baseline']");
   control.parentNode.parentNode.parentNode.style.display="none";



//Current
   control = $("select[title='Current']");
   control.parentNode.parentNode.parentNode.style.display="none";



//Target
   control = $("select[title='Target']");
   control.parentNode.parentNode.parentNode.style.display="none";


      });

</script>

4 spaces or a tab indent will format your code. – Jason McCreary Jul 12 '10 at 03:15 — Jason McCreary, Jul 12 '10 at 03:15
excuse me? Sorry I don't follow you. – Peter Jul 12 '10 at 03:17 — Peter, Jul 12 '10 at 03:17

score 2 · Answer 1 · answered Jul 12 '10 at 03:19

2

jQuery objects do not have a parentNode property. That is for working with DOM elements. jQuery can make this whole task a lot easier:

You could use .get() to get the actual DOM node:

control.get(0).parentNode.parentNode.parentNode.style.display="none";

However this is kind of backwards for jQuery, what would make more sense is to use the .parent() and .css():

control.parent().parent().parent().css('display', 'none');

And even more sense would be to just look for the .closest() parent that matches what you are actually looking for. (I.E a <tr>) and maybe just use .hide()

control.closest('tr').hide();

As far as the selector goes, $("select[title='Something']") will look for a <select title='something'>, which may not be what you want...

answered Jul 12 '10 at 03:19

gnarf

105,192
25
127
161

Hi, I used to have getelementbyid but since sharepoint adds a guid to every id and name I want to get the element by title instead to make it a bit more maintanable. I have a form with a few dropdownlist and textfields where the user can enter information a bout a project. Depending on what project type the choose some fields will be hidden. So how do you suggest I change for example: //Progress Status control = $("select[title='Progress Status']"); control.parentNode.parentNode.parentNode.style.display="none"; ? Thanks for your time. – Peter Jul 12 '10 at 03:28
Something like ``$("select[title=Progress Status]").closest('tr').hide()`... Adjust whats inside the `.closest()` for whatever element your crazy `.parentNode` chain is trying to find above the actual node... – gnarf Jul 12 '10 at 05:22
Hi gnarf, how should I adjust what's inside the .closest() if I for example have three parentNodes? – Peter Jul 12 '10 at 07:57
It's not about the number of `parentNode` with `.closest()`... Read the documentation... if you are looking for the parent `tr`, use `tr` if you are looking for the closest parent `
` use `.closest('div.test')`
– gnarf Jul 12 '10 at 20:53

score 0 · Answer 2 · answered Jul 12 '10 at 03:17

0

you can use:

control.hide();

answered Jul 12 '10 at 03:17

Germán Rodríguez

4,284
1
19
19

score 0 · Answer 3 · answered Jul 12 '10 at 03:20

0

Your code is probably not running because an element named "document" doesn't exist.

Change: $("document").ready(function ($) {

to:

$(document).ready(function(){

answered Jul 12 '10 at 03:20

Manfre

1,235
10
10

Hi, it was working before when I used getelementbyid but to make it a bit more maintanable (for deploying the site in several locations) I want to get the elements by title rather by id or name because sharepoint keeps changing them. – Peter Jul 12 '10 at 03:25
If sharepoint is adding a GUID prefix or suffix to the name, then you can still use the name as the selector. If the GUID is a prefix, use $('select[name^=field_name]') If the GUID is a suffix, use $('select[name$=field_name]') – Manfre Jul 12 '10 at 03:41

How to hide html elements depending on what title they have with jQuery?

3 Answers3