Working with jQuery and the SP.UI Namespace on SharePoint 2010

In this article, we are going to show some of the great script-based tools we can use to build great user experiences in SharePoint 2010.

First things first, please explore the links below, where you can read more information about the three tools we will be using in this article.

• jQuery. http://www.jquery.com
  
• SPServices Project. http://spservices.codeplex.com
  
• SP.UI Namespace. http://msdn.microsoft.com/en-us/library/ee552096.aspx

Adding the JavaScript Files

As with any JavaScript frameworks or tools, the first thing we need to do is load the applicable scripts into our web page. For this exercise, we are going to continue building on the solution we have been using over the last several articles. Just to make things a little easier, let's go ahead and store the two JavaScript files (jQuery and SPServices - the script responsible for SP.UI is already loaded with every SharePoint 2010 web page) in our SharePoint 2010 site collection. If you do not already have the files, download them from the sites mentioned above, then:

• Browse to the root web of your SharePoint 2010 site collection
  
• Click on the "All Site Content" link in the quick launch area

  

• Click the "Style Library" link to load up your Style Library

  

• Open the "Documents" tab in the ribbon and click on the "New Folder" icon

  

• Create a folder to house the JavaScript files and give it an intuitive name

• Click on the name of your new folder to open it

• Upload your documents by clicking the "Upload Document" icon in the ribbon, browsing to the file on your local file system and clicking the "OK" button

  

Now that we have both files stored in the Style Library within our site collection, we can add them to one of our SharePoint pages.