?
Solved

hide fields with jquery

Posted on 2010-09-09
18
Medium Priority
?
948 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
  • 3
18 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
ID: 33641324
So, is your problem solved?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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 2000 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

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
A recent project that involved parsing Tableau Desktop and Server log files to extract reusable user queries for use in other systems. I chose to use PowerShell to gather the data, and SharePoint to present it...
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 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