Can't get jQuery UI to work in my web part!

Question

I have the following markup:

<SharePoint:CssRegistration ID="cr_jqui" Name="/Layouts/MultiPart/css/smoothness/jquery-ui-1.8.12.custom.css" runat="server" After="corev4.css" />

<SharePoint:ScriptLink ID="sl_jq" runat="server" Name="MultiPart/js/jquery-1.5.1.min.js" Localizable="false"  />
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="MultiPart/js/jquery-ui-1.8.12.custom.min.js" Localizable="false" />

<script type="text/javascript">
    function LoadTabs() {
        $("#tabs").tabs();
        alert('set');
    }
    _spBodyOnLoadFunctionNames.push("LoadTabs");
</script>

<div id="tabs">
    <ul>
        <li><a href="#tab1">Nunc tincidunt</a></li>
        <li><a href="#tab2">Proin dolor</a></li>
        <li><a href="#tab3">Aenean lacinia</a></li>
    </ul>
    <div id="tab1">
        Tab1 content
    </div>
    <div id="tab2">
        Tab2 content
    </div>
    <div id="tab3">
        tab3 content
    </div>
    <div id="tab4">
        tab4 content
    </div>
    <div id="tab5">
        tab5 content
    </div>
</div>

And I have created a Mapped layouts folder with the following structure:

For some reason this does not display tabs as it should (renders it as if there was no JS or CSS). It alerts "set" like you would expect and does not throw any errors. I moved it to it's html page equivalent and it works. Any ideas what I am doing wrong?

Answer 1

Rather than using the _spBodyOnLoadFunctionNames function, go with jQuery's $(document).ready().

Also, in the Developer Tools in IE or Firebug, make sure that all of your files are loaded into the browser.

Answer 2

Fire up the Developer Dashboard in IE, and in the JavaScript console, see if you can apply the $("#tabs").tabs(); line by hand there. It might throw an error message which will give more clues, or it will just plain work, suggesting something's up with the BodyOnLoadfunctionNames bit.