jQuery and SharePoint

jQuery and SharePoint

jQuery is a fast, small, and feature-rich JavaScript library. As part of customizations, we might need to include jQuery in a SharePoint page. The following is a way to do that.

1. Add jQuery file to Site Assets library
2. Edit the Page
3. Insert Content Editor web part
4. Insert jQuery code
5. Testing jQuery

Use the following procedure to do that.

Step 1: Add a jQuery file to the Site Assets Library. Download JQuery.js from the following location:

Downloading jQuery

You can choose a compressed/non-compressed version:


 
Rename and upload the file to the Site Assets Library for faster access.



Step 2: Edit the Page

Choose "Site Actions" > "Edit Page" to bring your page in edit mode.



If you are using New/Edit pages of list/library then you can read this to enable editing.

Step 3: Insert Content Editor web part

Click the Insert tab and choose "Media and Content" > "Content Editor Web Part".



After insertion, choose the "Edit Web Part" option.



Click on the web part content area.

Choose the Format tab then select "HTML" then click the "Edit HTML Source" button as shown below.



You will get the dialog box below:



(Ensure that it is a blank one.)

Step 4: Insert jQuery Code

In the dialog box use the following code:

<script type="text/javascript" src="/SiteAssets/jquery.js"></script>

<script type="text/javascript">

     $(document).ready(function () {

    alert("JQuery: Hello, World!");

}

)

</script>|

The dialog box now looks like:

Click the "OK" button to close the dialog.

From the Page tab, click the "Save" button to save the page changes too.

Step 5: Testing jQuery

Click on the Home link and you will see the following message box.



Note

Sometimes jQuery is easier than JavaScript.