Client Side Programming Using jQuery in SharePoint

Introduction

In the following example I am going to explain how we can retrieve data using client side programming using jQuery in SharePoint.

I am trying to add Content Editor WebPart using jQuery and binding some text and styles.

Files Structure

Create the following folder structure to manage source files and store respective files in folder.



Figure 1: Create Folder

Create New WebPart Page in Site pages

Create WebPart page in Site Pages library and add the Content Editor WebPart as in the following screenshot, update the WebPart Content link to template file path.

../../SiteAssets/RK/CSS/RK_Home.html


Figure 2: Web Part


Figure 3: Site Content



Figure 4: Site Content2



Figure 5: Welcome

Source Code

RK_Home.html

<p>
    <h1>Welcome to RK Site</h1>
</p>
<p class="sampleText"></p>
<script type="text/javascript" src="../../SiteAssets/RK/JS/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../SiteAssets/RK/JS/RK_Home.js"></script>
<link rel="stylesheet" type="text/css" href="../../SiteAssets/RK/CSS/RK_Home.css" >
RK_Home.js
$(document).ready(function ()
{
$(".sampleText").text("This data coming using client side programming in SharePoint");
});
RK_Home.css
.sampleText
{
font-weight:bold;
color:red;
}

Final Output

Browse the new home page, you can see the final output.

Figure 6: RK Home