Using jQuery in SharePoint List Form

In my previous post, I showed you how to customize SharePoint List Form using SharePoint Designer.

It’s very common that we need to do the customization using JavaScript Library (e.g. jQuery, jQuery UI, etc.).

1. Download jQuery into a folder

2. Open SharePoint Designer

3. Open Site Assets, then click Import Files

Open Site Assets
Open Site Assets

4. Click Add Folder… to import the jquery folder

Import jQuery Folder
Import jQuery Folder

5. jquery Folder uploaded to Site Assets

jQuery in Site Assets
jQuery in Site Assets

6. Open SharePoint List Form, and enable Advanced Mode editing

7. Reference jQuery library and customization in the PlaceHolderAdditionalPageHead Content Control

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="FormCustomRedirectControl" AllowMultipleControls="true"/>
    <SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
        <SharePoint:CssRegistration Name="forms.css" runat="server"/>
    </ContentTemplate></SharePoint:UIVersionedContent>
    <script src="../../SiteAssets/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            alert("You are running jQuery version: " + $.fn.jquery);
        });
    </script>
</asp:Content>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s