Tuesday 25 June 2013

Jquery with sharepoint list basics

Jquery basics with sharepoint list

Reference urls: http://geekswithblogs.net/SoYouKnow/archive/2011/08/20/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-amp-setting-sharepoint.aspx

http://geekswithblogs.net/SoYouKnow/archive/2011/07/28/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-started.aspx

http://geekswithblogs.net/SoYouKnow/archive/2011/04/06/setting-sharepoint-drop-down-lists-w-jquery---20-items.aspx



<input type=”text” id=”myText”>

$(“#myText”)--->calling id 

 “title” is an ATTRIBUTE of the element, and the value of that attribute is our SharePoint field’s display name. 
$(“input[title=’My Text Field’]”)-->calling sharepoint field (My Text Field)

So, the above jQuery says “Search all the input elements for one with the attribute of title with a value of “My Text Field”.

Getting & Setting SharePoint Form Fields

//getting the value from list  field My Text Field
var textValue = $(“input[title=’My Text Field’]”).val();
To set the value we would use:
$(“input[title=’My Text Field’]”).val(textValue);


the value is equal to some text that time(Similar to all the senerios)

//getting the value from list  field My Text Field is No
var textValue = $(“input[title=’My Text Field’]”.val=="NO");
To set the value we would use:
$(“input[title=’My Text Field’]”).val(textValue);

Lookup and Choice fields

getting and setting this field are:
var mySelectValue = $(“select[title=’My Choice’]”).val();

$(“select[title=’My Choice’]”).val(mySelectValue);
It is important to note that you are setting and getting the option Value, not the displayed text. Also, if you go above 20 items things get really funky if you are using IE.  Luckily I already did a whole blog post on that:
Setting SharePoint Lookup Lists w/ jQuery (+/- 20 items)

Date Fields


Getting and setting that value would be:
var myDateValue = $(“input [title=’My Date Field’]”).val();

$(“input [title=’My Date Field’]”).val(myDateValue);

Checkboxes

if( $("input[title='My Check  box']").is(':checked'))
{
   alert("it's checked");
}
If you want to check or uncheck a checkbox programmatically you simply need to set or remove the “checked” attribute of the element. To uncheck a checkbox:
$("input[title='My Check  box']").removeAttr('checked');
To check a checkbox:
$("input[title='My Check  box']").attr('checked','checked'); 

Dropdowns 

$(document).ready(function(){
  //Define which columns to show/hide by default
  $('nobr:contains("fld1")').closest('tr').hide();
 $('nobr:contains("fld2")').closest('tr').hide();
$('nobr:contains("fld3")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection
$("select[title='dp3']").change(function() {
  if ($("select[title='dp3']").val() == "NO") {
  $('nobr:contains("fld3")').closest('tr').hide();
  } else if($("select[title='dp3']").val() == "YES"){
    $('nobr:contains("fld3")').closest('tr').show();
  }
 });

1 comment:

  1. Chakri, good post. Thanks. One clarification you might want to make is that the punctuation is critical. Single quote is ', not ’; double qoute is ", not ”

    ReplyDelete