Solved

hide fields with jquery

Posted on 2010-09-09
18
942 Views
Last Modified: 2012-05-10
I am able to hide these standard calendar fields via jquery with this formula:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  //hide all of the check-boxes I don’t need
  $('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide
();
});
</script>

But there are several more fields I would also like to hide with jquery. Custom calculated fields but it's not working.

this is from the View Source:

&#9;<TR>
&#9;&#9;<TD nowrap="true" valign="top" width="165px" class="ms-formlabel"><H3 class="ms-standardheader"><a name="SPBookmark_FilterEndYear"></a>FilterEndYear</H3></TD>
&#9;&#9;<TD valign="top" class="ms-formbody" width="450px" ID="SPFieldCalculated">
&#9;&#9;<!-- FieldName="FilterEndYear"
&#9;&#9;&#9; FieldInternalName="FilterEndYear"
&#9;&#9;&#9; FieldType="SPFieldCalculated"
...

What do I need to do to get these fields hidden with jquery?
0
Comment
Question by:sullisnyc44
  • 8
  • 4
  • 3
18 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33640283
Is it possible for you to give complete html and let me know which all fields from it you need to hide?
0
 

Author Comment

by:sullisnyc44
ID: 33640818
What's interesting is that I got it to work using adding this:

  $('tr:has(td[id=SPFieldCalculated])').not('tr:has(tr)').hide

Complete code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  //hide all of the check-boxes I don’t need
  $('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide;
  $('tr:has(td[id=SPFieldCalculated])').not('tr:has(tr)').hide
();
});
</script>

obviously I may not always want to hide the calculated fields and I'd like to hide certain rows. Like ideally I'd like to hide the 'Start Time' and 'End Time' fields because they show that time and these will always be all day events.

I have calculated fields for 'Start Date' and 'End Date' that I would actually like to display instead.

Attached is the source.

IDEALLY - I would like to hide on the displayform the folllowing:

Start Time  -Date and Time  
End Time  -Date and Time  

FilterStartYear  -Calculated (calculation based on other columns)  
FilterEndYear  -Calculated (calculation based on other columns)  
FilterStartWeek  -Calculated (calculation based on other columns)  
FilterEndWeek  -Calculated (calculation based on other columns)  

CurrentYear  -Calculated (calculation based on other columns)  
OutOfTheOffice  -Calculated (calculation based on other columns)  
htmlsource.htm
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33641324
So, is your problem solved?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:sullisnyc44
ID: 33641376
well not exactly.

Because IDEALLY I don't want to hide ALL of the calculated columns.

I actually only want to hide these calculated columns:
FilterStartYear  -Calculated (calculation based on other columns)  
FilterEndYear  -Calculated (calculation based on other columns)  
FilterStartWeek  -Calculated (calculation based on other columns)  
FilterEndWeek  -Calculated (calculation based on other columns)  

CurrentYear  -Calculated (calculation based on other columns)  
OutOfTheOffice  -Calculated (calculation based on other columns)  

I'd like to hide these fields on Display (standard date/time fields on any calendar:
Start Time  -Date and Time  
End Time  -Date and Time  

And display their calculated counterparts
Start Date
End Date

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33642001
Something like this? Assuming that the ones that you have posted above are the ids

$(function() {
  //hide all of the check-boxes I don’t need
  $('#FilterStartYear, #FilterEndYear , #FilterStartWeek , #FilterEndWeek,  #CurrentYear ,  #OutOfTheOffice ').hide();
});

0
 

Author Comment

by:sullisnyc44
ID: 33642172
Those internal field names are correct.

however when I copy that function above to my CEWP nothing is hidden now, not even my original check boxes (I can understand that) but none of those fields are hidden

Are there spaces in between the field names?

And the single quotes are correct?

And will this work for those other Date Fields that are not calculated items? [Start Time] & [End Time]?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33642205
you need to invoke this function at document ready

you can give multiple selectors separated by comma
http://api.jquery.com/multiple-selector/

only difference is i have used single quotes :)
0
 

Author Comment

by:sullisnyc44
ID: 33642255
I'm sorry - it's still not working for me. I appreciate your patience with me.

I understand what you are trying to accomplish and I like the concise, neat code.

I would like to incorporate your code into what I have that's working or put them all together if I can.

Is there a parameter or something missing from your code? How does it understand what '#FilterStartYear' is? I'm missing something? Variables? I'd like to keep all the code in this CEWP if I can... does that make sense?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  //hide all of the check-boxes I don’t need
  $('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide();

 //your additonal code here

});
</script>
0
 

Author Comment

by:sullisnyc44
ID: 33642286
This is what I added:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  //hide all of the check-boxes I don’t need
  $('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
  $('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide();
  $('#FilterStartYear,#FilterEndYear,#FilterStartWeek, #FilterEndWeek,#CurrentYear,#OutOfTheOffice').hide();
});
</script>
0
 

Author Comment

by:sullisnyc44
ID: 33642313
Maybe I have the wrong 'name'?

Here is an example of the FilterEndWeek from the view source:

TR>
            <TD nowrap="true" valign="top" width="165px" class="ms-formlabel"><H3 class="ms-standardheader"><a name="SPBookmark_FilterEndWeek"></a>FilterEndWeek</H3></TD>
            <TD valign="top" class="ms-formbody" width="450px" ID="SPFieldCalculated">
            <!-- FieldName="FilterEndWeek"
                   FieldInternalName="FilterEndWeek"
                   FieldType="SPFieldCalculated"
              -->
                  9/10/2010&nbsp;
                  
            </TD>
      </TR>
0
 

Author Comment

by:sullisnyc44
ID: 33647366
someone else suggested this - which also didnt work:

$(”a[name$='FilterStartYear']“).closest(’tr’).hide();

Is there something obvious that I'm missing?
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33711286
what about giving it a class?

then hiding everythign with that class?

could you maybe provide some code? hmm the html structure
0
 
LVL 2

Accepted Solution

by:
WilliamStam earned 500 total points
ID: 33711291
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

use the latest jQuery aswell.. 1.2.6 has issues...

1.4.2 <------
0
 

Author Comment

by:sullisnyc44
ID: 33716258
Oh my goodness - I seriously cannot thank you people enough!!!

This worked like a charm. Thank you Thank you Thank you!!!


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//hide all of the check-boxes I don’t need
$("a[name$='FilterStartYear']").closest("tr").hide();
$("a[name$='FilterEndYear']").closest("tr").hide();
$("a[name$='FilterStartWeek']").closest("tr").hide();
$("a[name$='FilterEndWeek']").closest("tr").hide();
$("a[name$='OutOfTheOffice']").closest("tr").hide();
$("a[name$='SPBookmark_EventDate']").closest("tr").hide();
$("a[name$='SPBookmark_EndDate']").closest("tr").hide();
$('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
$('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
$('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide();
});
</script>

Open in new window

0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33716645
hehe my pleasure :P so it was the jQ version thing :D something SOOOOOOOO simple :D
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now