Solved

hide fields with jquery

Posted on 2010-09-09
18
944 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery dialog box help 2 17
binding event to form in window.open 9 35
Please explain purpose of GZIP 4 34
Possible propagation problem 1 21
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

840 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