Search code examples
jquerysharepointweb-parts

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

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 />
Solution

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