How to use jquery correctly in SharePoint Web Part - jquery doesn't always fire

Question

I\'m learning how to use jquery with SharePoint. My example draws a red box inside the Content Editor Web Part when a link is selected. My code works when the SharePoint p

Answer 1

Recently I have encountered with a problem I think it might help someone.

In SharePoint head tag if you place the script tag like

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/>

then jQuery is not working but if you place like

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

See the </script> difference then it's working.

I am surprised!

Answer 2

Check the rendered HTML for the ScriptLink control and see if you can browse to the location given by the <script> tag. This should give you some ideas about what's going wrong.

Also, have a look at this question which contains options for adding jQuery to SharePoint. (Disclaimer: one of the answers is mine and the method I currently use.)

Answer 3

The main problem with JavaScript code not consistenly firing when a page is loaded is because the entire page may not have finished loading and therefore the internal DOM may not have been completely constructed yet.

The best way to fix this is to hook your code to the load or ready event.

For example

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script language="javascript">
function doSomething()
{
  // Your code goes here
}

jQuery.event.add(window, "ready", doSomething);
</script>

For detailed examples on how to use this in SharePoint, see http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.html and http://www.muhimbi.com/blog/2009/07/automatically-add-search-as-you-type-to.html

Answer 4

I think it is a timing issue. Try this. Add the LoadAfterUI="true"

<SharePoint:ScriptLink ID="SPScriptLink" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js">
</SharePoint:ScriptLink>