JQUERY BASICS – Part 2

January 16, 2016 Ravichandran KrishnasamyLeave a comment

load()
Using load method we can load other page’s full content or other page’s particular control inner HTML
Ex. Below code will load the MainDiv inner HTML. so inside the load method we need to pass page URL as a parameter if you want load full other source page or if you want to load particular element’s inner HTML then after the URL parameter give one space then enter the selector, here I’ve passed div id as selector (#MainDiv)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>main page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>HTML from another page:</b>

<div id="new-projects"></div>

 
<script>
 $("#new-projects").load("anotherpage.html #MainDiv");
</script>

</body>
</html>

This is the other source page

 
<!doctype html>
<html lang="en">
<head>
<title>another page</title>
</head>
<body>
full HTML contents From another page
<div id="MainDiv">
<h3 style="color:green">div inner html from another page</h3>
</div>
</body>
</html>

OutPut

2016-01-16_16-33-35

each()

each() will take collection from selector and loop the items, this is same as Foreach in c#.
Ex. Below code will loop the all div elements and elements inner HTML append into one p tag.

 
<!DOCTYPE html>
<html>
<head>
<title>For Each</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 $(document).ready(function () { $('div').each(function () { $('.ptag').append($(this).html()); }); });

 </script>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<p class="ptag"></p>


</body>
</html>

Output

slideToggle()

The jQuery library provides several techniques for adding animation to a web page, slideToggle will hide and show the targeted element,

Ex, below code will hide and show the all div elements

</pre>
<!DOCTYPE html>
<html>
<head>
<title>Show Hide</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>Div 1</div>


<div>Div 2</div>


<div>Div 3</div>


<div>Div 4</div>

 <input type="button" id="button" value="click here" />
 <script>
 $('#button').click(function () { $('div').slideToggle(1500); });
 </script>
</body>
</html>

JQUERY BASICS – Part 1

January 14, 2016 Ravichandran KrishnasamyLeave a comment

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

In jQuery all the codes starts with “jquery” it’s kind of a door, but when we write some long functionality we can see lot of jquery terms in the code. We don’t really want to repeat it everywhere, instead of “jquery” we can use “$” symbol.


jquery == $

Ex, below are two methods that return the same o/p. In this example we write hello world in the browser console (F12 shortcut key to open browser console window) after the page load.


jQuery(function () { console.log('hello world'); });

$(function () { console.log('hello world'); });

Selectors

We can use CSS3 Selectors for selecting particular tag or set of tags from the page.

Ex,


<html> <head>
<style> p { background-color: #ffc022; } </style>

 </head> <body>
<div id="container">
<h1 class="Info">Introduction</h1>
<a href="/newpage">move to the new page</a></div>
</body> </html>

In the above HTML code we call div using id, in this method id should be unique,

$(‘#container’)

Values for class be repeated and have multiple space-separated values

$(‘.Info’)

Adding and Removing CSS class

After selecting using selector we can add or remove CSS class using below methods

$( "p" ).addClass( "newClass onemoreClass" )

$( "p" ).removeClass( "newClass onemoreClass " )

Events

In the jQuery we can call events in varies ways, in below method we add a function within click event. We have lot of events available in jQuery.

$( "#butSave" ).click(function() {

alert( "Handler for .click() called." );

});

Another method, here we are attaching the event into a button.

$( "#btnSave" ).on( "click", function() {
alert( "Handler for click called using event attach method " );

});

Below code will remove the event attachment from button.

$( "#btnSave" ).off( "click", function() {

alert( "Handler for click is removed" );

});

Below code will fire only once, there is some other event attaching methods also available in jQuery

$( "#btnSave" ).one( "click", function() {

alert( "Handler for click called using event attach method " );

});

Selecting right version of jQuery

There are two major release available in jQuery, one is 1.x and another is 2.x. Select 1.x version if you want to support your application in IE 8 and the below version browsers,else select 2.x.

Retrieve List data in SharePoint Online (office 365) using JSOM

October 28, 2015October 30, 2015 Ravichandran KrishnasamyLeave a comment

Create new project using App for SharePoint template under Apps in Visual Studio.

In the new project wizard enter your SharePoint site URL and select SharePoint Hosted and click Finish.

After project created open solution explorer and select App.js file for edit

var context;
var hostweburl;
var appweburl;
var appContextSite;
var list;
var listItems;
var web;

$(document).ready(function () {
 //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getUrl);
 getUrl();
});

function getUrl() {
 hostweburl = getQueryStringParameter("SPHostUrl");
 appweburl = getQueryStringParameter("SPAppWebUrl");
 hostweburl = decodeURIComponent(hostweburl);
 appweburl = decodeURIComponent(appweburl);
 var scriptbase = hostweburl + "/_layouts/15/";
 $.getScript(scriptbase + "SP.Runtime.js",
 function () {
 $.getScript(scriptbase + "SP.js",
 function () { $.getScript(scriptbase + "SP.RequestExecutor.js", execOperation); }
 );
 }
 );
 event.preventDefault();
}

function execOperation() {
 context = new SP.ClientContext(appweburl);
 var factory =
 new SP.ProxyWebRequestExecutorFactory(
 appweburl
 );
 context.set_webRequestExecutorFactory(factory);
 appContextSite = new SP.AppContextSite(context, hostweburl);
 web = appContextSite.get_web();
 context.load(web);
 var camlQuery = new SP.CamlQuery();
 camlQuery.set_viewXml("");
 list = web.get_lists().getByTitle("Documents");
 listItems= list.getItems(camlQuery);
 context.load(list);
 context.load(listItems);
 context.executeQueryAsync(onSuccess, onFail);
}
function onSuccess() {
 $("#message").empty();
 var listInfo = '';
 var listEnumerator = listItems.getEnumerator();

 listInfo += "
<table>
<tr>
<th>Id</th>
<th>Title</th>
</tr>

";

 while (listEnumerator.moveNext()) {
 var listItem = listEnumerator.get_current();
 listInfo += '
<tr>
<td>' + listItem.get_item('ID') + '</td>

'
 + '
<td>' + listItem.get_item('FileLeafRef') + '</td>

'
 + '</tr>

\n';
 }

 listInfo += '</table>

';

 $("#message").html(listInfo);
}

// This function is executed if the above call fails
function onFail(sender, args) {
 alert(args.get_message());
}
function getQueryStringParameter(paramToRetrieve) {
 var params =
 document.URL.split("?")[1].split("&");
 for (var i = 0; i < params.length; i = i + 1) {
 var singleParam = params[i].split("=");
 if (singleParam[0] == paramToRetrieve)
 return singleParam[1];
 }
}

Code flow

Step 1: getUrl() function called when page get ready

Step 2: getUrl() function is collect host and app web URLs from query strings and adds some JavaScript files for reference and call execOperation() function

Step 3: execOperation() function is create app sire context and request Documents list data as asynchronous call

Step 4: onSuccess() event will receive list data, data written as html table and table added into div control