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:

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

Rename and Upload the file

Step 2: Edit the Page

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

Edit the Page

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".

Content Editor Web Part

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

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.

Edit HTML Source button

You will get the dialog box below:

dialog box

(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.

Testing JQuery

Note

Sometimes jQuery is easier than JavaScript.