jQuery Weirdness

Aug 4, 2010 at 1:17 AM

I know this isn't a strictly "SPServices" question, but I am using some jQuery code to hide some fields on a list edit form. 

I don't have a ton of jQuery experience, so I am using a couple of different techniques that I found in the blogosphere and not having great luck.

Here is the rub -- the code works fine, hiding all of the fields, on Chrome...but not on IE or Firefox.  Is there another method I can try that will work across different browsers?

I am also interested in any other ways to handle the "Content Type" field.  I could not use the same pattern as the other fields, and I am a little wary of the "parent daisy chain" effect to hide that field.

One more point -- if it makes a difference -- the list in question is a list of tasks in SharePoint Server 2010.

Thanks in advance if anyone can help out a n00b.  Here is the code:

<script type="text/javascript" src="../../Style Library/js/jquery-1.4.2.min.js" />

<script type="text/javascript">

$(document).ready(function() {

  $('nobr:contains("Predecessors")').closest('tr').hide();
  $('nobr:contains("Priority")').closest('tr').hide();
  $('nobr:contains("Start Date")').closest('tr').hide();
  $('nobr:contains("Due Date")').closest('tr').hide();
  $('nobr:contains("Student")').closest('tr').hide();
  $('nobr:contains("needsSAP")').closest('tr').hide();
  $('nobr:contains("Description")').closest('tr').hide();
  $('nobr:contains("Assigned To")').closest('tr').hide();
  $('nobr:contains("% Complete")').closest('tr').hide();
  $(":input[title='Content Type']").parent().parent().hide();

});

</script>

Coordinator
Aug 4, 2010 at 1:27 AM

Usually the best way to select columns in SharePoint forms is to use the title as your "anchor". Something like this usually works:

$("input[Title='Start Date']")

This says to find an input element in the DOM which has a title = 'Start Date'. Each different type of column has some sort of thing that you can rely on for the selector.  I don't *think* that they all have nobr elements wrapping them, but I haven't cracked open SP2010 as I'm writing this to see.

M.

Aug 4, 2010 at 3:03 PM
Edited Aug 4, 2010 at 6:35 PM

Still no luck.  I have tried several permutations to hide these rows...they all work in Chrome, and none of them work in IE8/7 or Firefox.

I have tried:

$("td.ms-formbody").each(function() { if($(this).html().match('Priority')!=null) { $(this).parents('tr:first').hide(); } });

$('nobr:contains("Priority")').closest('tr').hide();

$("input[title='Priority']").closest('tr').hide();

Can anyone think of a situation where this might happen, or a different approach that will work on all browsers?  At this point, I would even be happy to find something, anything, that would work in IE and/or FF, so I can just run different code depending on what browser I am in.

Aug 4, 2010 at 6:01 PM
Edited Aug 4, 2010 at 6:05 PM

I use a snippet I found here.  No idea if it'll work for SP2010 though.

function findacontrol(FieldName) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}

  Then you can use

var control = findacontrol("Priority"); control.parentNode.parentNode.style.display="none";

to hide a row and set display="inline"; to display it again if so desired. --Bert

Aug 4, 2010 at 7:00 PM

Thanks, Bert...but that isn't working either.  I used that same snippet / pattern in MOSS/WSS3 but decided to try jQuery on SP 2010.

Unfortunately, everything works on Chrome and nothing works on IE or Firefox.

 

Coordinator
Aug 5, 2010 at 12:43 PM

Joe:

Sorry for the radio silence, but I've had some client fires to put out.  I also cant seem to get my 2010 VM to run for me.

The thing to do is to ise a DOM inspector to see what the elements in the page are that you want to select on. It sounds a little bit like you're shooting in the dark.  If you can do a View Source and post the relevant HTML section, maybe I can help, though.  Why don't you paste in the complete markup for a couple of the form's rows (TRs)?

M.

Aug 5, 2010 at 8:44 PM

Thanks for the help everyone -- it seems that running jQuery code in a modal dialog created by using SP.UI.ModalDialog was just not working.

When I removed all the jQuery stuff, I was able to use the standard "hide fields" snippet referenced by Bert earlier in this thread, that we have all been using for years...with one addition...since my list had multiple content types, I needed to include a check to see if the control existed before I decided to hide it.  Without this, if you are running the code on a page for a particular content type, and encounter a control (field) that is not included in that content type, none of the fields below that field in the code will be hidden.

So, for each control you want to hide, it looks like this:

var control = findacontrol("Priority");
if (control != null)
    control.parentNode.parentNode.style.display="none";

Coordinator
Aug 6, 2010 at 4:14 AM

Aha! You hadn't mentioned the modal dialog before. However, if the JavaScript from Bert works, then the jQuery should work as well. It's still got to be a matter of getting the selectors right.

M.