Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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:

enter image description here

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?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
Good call. Looked at my loaded CSS' and the one I was trying to include was missing. Changed it to /_layouts/MultiPart/css/smoothness/jquery-ui-1.8.12.custom.css and it started working. Thanks! –  Abe Miessler Apr 29 '11 at 19:12

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.