Tuesday, March 10, 2015

Add jQuery to Your Sample Page (KSUG 03.10.15)

These are the steps for adding jQuery and Site.js references to your Sample Page using Designer.
Don't have access to Designer?  No problem.  Instructions to do the same using the regular UI are further below.

Creating the Sample Page and adding script tags using Designer

1) Open the "Site Page" folder
2) On the ribbon Click "Web Part Page" drop down
3) Choose "Single Web Part Page"
1) Still in the "Site Pages" folder
2) Right Click on your newly created Sample Page
3) Select "Edit File in Advanced Mode" from the shortcut menu
1) Locate the line indicated
2)  Add the two script tags shown
<%-- add script tags between here... --%>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="../SiteAssets/site.js" ></script>
<%-- ...and here --%>

(the comment lines above and below the script tags are optional) 

Or...Creating the Sample Page and adding script tags through the UI

1) Navigate to the "Site Pages" library
2) On the ribbon Click "Files"
3) On the ribbon drop down "New Document"
4) On the ribbon select "Web Part Page"
After naming and saving, open the page
1) On the ribbon Click "Page"
2) On the Ribbon Click the "Edit Page" drop down 
3) On the Ribbon menu Click "Edit Page"
On the page Click "Add New Web Part" (not shown)
1) Click "Media and Content"
2) Click "Content Editor"
Click the "Add" button (not shown )
Once the Content Editor Web Part appears on the page...
1) On the web part Click the drop-down-arrow
2) Click "Edit Web Part" from the menu

Click "Hidden" (we don't want this web part to be visible)
Click "Apply" or "Save" (not shown)
Back on the web part Click the hyperlink shown below 

On the Ribbon select the "Edit HTML" menu item (not shown)
The "HTML Source" dialog box will appear. 
1) Enter the scripts tags into the textbox
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="../SiteAssets/site.js" ></script>
2) Click OK


Click "Stop Editing"
Happy jQuery-ing