How to use jquery correctly in SharePoint Web Part

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 page is in edit mode but not after I've left the page and returned in non edit mode. The jquery function does not fire for some reason... I'm missing something simple but not sure what.

Thanks for any help.

Kevin

My master page for the site connects to the jquery-1.3.2.min.js file this way:

 <SharePoint:ScriptLink language="javascript" name="jquery-1.3.2.min.js" 
 Defer="true" runat="server"/>

My Content Editor Web Part code looks like this:

<style type="text/css">
#box
{
    background: red;
    width: 300px;
    height: 300px;
    display: none;
}
</style>


<script type ="text/javascript">
    $(function() {
        $('a').click(function() {
            $('#box').slideDown(2000);
        });
    })
</script>

<div id="box">
<h1>This is text in the box</h1>
</div>
<a href="#">Display Box</a><br />

Answer 1

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 2

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 3

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>

Answer 4

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.)