Client Side Programming Using jQuery in SharePoint


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.


Figure 2: Web Part

Figure 3: Site Content

Figure 4: Site Content2

Figure 5: Welcome

Source Code


  1. <p>  
  2.     <h1>Welcome to RK Site</h1>  
  3. </p>  
  4. <p class="sampleText"></p>  
  5. <script type="text/javascript" src="../../SiteAssets/RK/JS/jquery-1.11.3.min.js"></script>  
  6. <script type="text/javascript" src="../../SiteAssets/RK/JS/RK_Home.js"></script>  
  7. <link rel="stylesheet" type="text/css" href="../../SiteAssets/RK/CSS/RK_Home.css" >  
  8. RK_Home.js  
  9. $(document).ready(function ()   
  10. {   
  11. $(".sampleText").text("This data coming using client side programming in SharePoint");   
  12. });  
  13. RK_Home.css  
  14. .sampleText  
  15. {  
  16. font-weight:bold;  
  17. color:red;  
  18. }  
Final Output

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

Figure 6: RK Home

Up Next
    Ebook Download
    View all
    View all