Solved

hide fields with jquery

Posted on 2010-09-09
18
937 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Read about why website design really matters in today's demanding market.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

708 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

15 Experts available now in Live!

Get 1:1 Help Now