Per Design

Mostly musings on design

Per Design

SharePoint and jQuery

So I had another interesting project recently where I needed to integrate jQuery and a jQuery plugin into a SharePoint site. Here are some notes from that experience that will, hopefully, help others out.

  1. Create a custom master page and “embed” jQuery in the <head> (not linked to an external file, but actually copy and paste the jQuery minified code within a script tag). This way you won’t have to deal with path issues. <Update 4-14-2013:> You’re better off placing the jQuery library under the Style Library and calling it from within your master page’s <head>. You will need to determine the file path though, but it should be fairly easy to figure out. </end update> Apply your custom master page to your site (and any subsites you want it applied to). This master page can be a copy of the basic v4.core if you want. All we’re doing is adding the jQuery framework into a script tag in the <head>.
  2. To use a jQuery plugin, first create a custom library to hold your jQuery scripts, plugins and your HTML document with your working code.
  3. Then use the HTML Page Viewer web part to bring in your HTML document to whatever SharePoint page you need (in an iframe). And everything should work as expected.

One interesting issue I had with this project was the fact that upper and lowercase URLs went to the same page but in my script this was two different URLs. So to get around this in my script, I had to grab the window location, turn it into a string and then lowercase it, before applying other jQuery cool stuff for a specific page.

Anyway, that’s what I learned. I hope it’s useful!