Best practices for including jQuery from a web part?

Question

I have a web part that requires jQuery. I'm wondering what the best practices are when it comes to including this. I assume that just adding it to a page that already has it could potentially cause problems. Is there a way that I can check before I include it?

Answer 1

I use the ClientScriptManager for loading script files (including jQuery when not globally available) within Web Parts, and test to make sure the script I want is not already registered. This has proven for me the safest way to use jQuery in multiple web parts on a page.

I mentioned delegate controls before in another answer but deleted it, as it wasn't a real answer to the original question, but for some on here who think it may provide useful, it's just marked as deleted and separate from this

Answer 2

I like to reference the jQuery library in the master page, so then it is always available.

Answer 3

if you want to include jQuery from a web part and check if jQuery is alraedy referenced,

you could use this code

if(!(window.jQuery) {
  var s = document.createElement('script');
  s.setAttribute('src', 'pathtoyourJquery');
  s.setAttribute('type', 'text/javascript');
  document.getElementsByTagName('head')[0].appendChild(s);
}

of course you can use write this code from server side code or use the content webpart to add this directly in js

Answer 4

In sharepoint 2010, you now have the Scriptlink element for features. Deploy the js file in the feature, then using the scriptlink include it in the masterpage. Including it multiple times doesn't matter, as JS is read lineary by the browser, it'll just use the last file it encounters. There is of course the matter of different version. But if you are the developer and deploy it using a feature, you are in control which version of the jQUery library is inlcuded.

Edit: More info here: http://weblogs.asp.net/jan/archive/2010/09/02/deploying-and-using-jquery-with-a-sharepoint-2010-sandboxed-solution.aspx

Answer 5

Inside your script tag, you can test if jQuery is already defined and if not, then add it to the page.

<script type='text/javascript'>
  if (typeof jQuery == 'undefined')
    document.write('<scr'+'ipt type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></sc'+'ript>');
</script>