Solved

hide fields with jquery

Posted on 2010-09-09
18
938 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
 

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Read about why website design really matters in today's demanding market.
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

910 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

20 Experts available now in Live!

Get 1:1 Help Now