Adding jQuery+SPServices to a SharePoint Page: Step One, Always

As a follow up to my prior post Adding jQuery to a SharePoint Page: Step One, Always, here’s another step one, always, for when you are using jQuery+SPServices. Even if you have referenced the jQuery library correctly, you still may not be referencing SPServices correctly.

To make sure that SPServices is referenced correctly, add this line:

  alert($().SPServices.SPGetCurrentSite());

right after

$(document).ready(function() {
  alert("jQuery");

The first alert will ensure that your jQuery reference is correct. The second will ensure that your SPServices reference is correct, assuming that you see the name of your current site. If you see “undefined” or some value which makes no sense, odds are your reference to SPServices is wrong.

If you get both alerts, you’re past some large percentage of the issues I help with in the SPServices Discussions. The rule of thumb is relatively simple: scripts which depend on other scripts must be referenced after those dependencies. SPServices requires jQuery, so you reference jQuery first and then SPservices. If your dependencies are more complex, consider using a more sophisticated script loader, like the great LABjs from Kyle Simpson (@getify). You can also, of course, use SharePoint’s script loading logic, though I’ve never found that it offers much benefit for the complexity it adds.

Here’s the full simple step one test. Obviously, you’d replace the references with your own paths and filenames.

<script type="text/javascript" language="javascript" src="my_path/jquery-1.6.1.min.js"></script><script type="text/javascript" language="javascript" src="my_path/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    alert("jQuery");
   alert($().SPServices.SPGetCurrentSite());
  });
</script>