JQuery Selectors

JQuery is awesome, effective, powerful, rocking… I don’t have more word to say about JQuery.

In past I have posted some JQuery magic scripts, here I want to share some basic knowledge of JQuery selectors which will helps to target html tags.

jQuery offers a great engine for selecting html tags(elements) in the document which almost gives every filter option (tag name, attribute name, classes , properties etc.) for effective selection.

Here effective selection means, selection will not fail at any condition. Example: New html tags get added or in .Net server side controls id get change on each page load.

/* ########## Select HTML Tags ###########*/

// Get all tags by CSS class name
$(".ms-vb-user").css("display", "none");

// Get all div tags by CSS class name
$("div.ms-vb-user").css("display", "none");

// Get tag by id
var SelectedVal = $('#TDRightArea').text();

// Loop through all matching tags
$('a[href*=/_layouts/userdisp.aspx?ID=]').each(function () {
        var SelectedVal  = $(this).text();  
    });

//Get Parent Tag 
$('#TDRightArea').parent().html();

/* ########## Select and find in HTML Tags ###########*/

$('#TDRightArea').find('div.rightsubarea').each(function () { 
   $(this).css("color", "blue");
});

/* ########## Select .Net Controls ###########*/

// Get Radio Button List selected option
var SelectedVal = $('input[type=radio][id*=RBLLocation]:checked').val();

// Get TextBox entered text
var SelectedVal = $('input[type=text][id*=TxtLocation]').val();

// Get ListBox selected option
var SelectedVal = $("[id*='LBLocation'] option:selected").text();

// Get DropDown List selected option
var SelectedVal = $("[id*='DDLLocation'] option:selected").text();

// Get CheckBox List selected option
var SelectedVal = $('input[type=checkbox][id*=CBLLocation]:checked').next().text();

// Check CheckBox List option is checked, return true or false
var isChecked = $('input[type=checkbox][id*=CBLocation]').is(':checked');

/* ########## Select SharePoint Controls ###########*/

//Get PeopleEditor control value (SharePoint)
var SelectedVal = $("textarea[id*='PeopleEditorManager']").val();

More reference blogs:

http://api.jquery.com/category/selectors/
http://codylindley.com/jqueryselectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/jquery_selectors.asp


ENJOY !!!

Remove Lookup Hyperlink from SharePoint List view using JQuery

When you use lookup to the list automatically SharePoint give link to the lookup item on list view.

Check it out….

Lookup column with Hyperlinks

But many times, we don’t want  those Hyperlinks on the list view, as we can remove it from SharePoint Designer but it’s a hectic task.

Simply add JQuery  to remove those Hyperlinks.

First, get the URL of the link using Developer tool of IE or Firebug of Firefox browser. we are going to some part of URL in the below code.

Get URL using Developer tool of IE

Then copy following JQuery code to the HTML form WebPart on list view.

Jquery For MOSS 2007/WSS 3.0:

Note: Change highlighted text as per your context.

Jquery For SharePoint 2010/SharePoint Foundation 2010:

Note: Change highlighted text as per your context.

If View is Grouped, set list view setting "By default, show groupings:" to  Expanded

List View setting: Make sure that By default, show groupings: Expanded

List view with removed hyperlinks to Lookup columns:

Live simple!

SharePoint 2010 jQuery: List Scrolling View with Frozen Header

Problem:

Many times SharePoint List has huge amount of records (Number of items) and it’s hard to scroll out the view. Also while scrolling the page we cannot determine which information is from which column.

Solution:

By simple applying CSS we can achieve the Frozen Headers like Excel Sheet. And for achieving the same we use JQuery.

Implementation: 

1. Go to List View Page and Html Form Webpart on the same page.

2. Copy Following code in Html Form Webpart. Just replace the LISTID and VIEWID (Highlighted in yellow color).

<script type="text/javascript" src="/Style Library/jq.Smoothness/js/jquery-1.5.1.min.js"></script> <style type="text/css"> <!-- .DataGridFixedHeader { position: relative; top: expression (this.offsetParent.scrollTop); background-color: gray;} --> </style> <script type="text/javascript"> $(function(){ var $table = $("TABLE[ID^='{F1D2645C-4CC3-458C-BC93-CBCFECD12171}-{5AB46E0C-D38F-4FF2-BBE0-0D485CC351E9}']:first","#MSO_ContentTable"); <!--WRAP TABLE IN SCROLL PANE--> $table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: " + (screen.height-400) + "px'></DIV>"); <!--FROZEN HEADER ROW--> $("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader"); }); </script>

Note:
For IE8 and IE9 browsers, require change in CSS class .DataGridFixedHeader  as follows.
 position: absolute;

Output: