jQuery UI tabs not rendering

Question

I get no javascript or markup errors with the code below, but I don't get any tabs either

[_Layout.cshtml]

<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/_Layout.js")" type="text/javascript"></script>
</head>

Any help is appreciated.

Thanks.

<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content</p>
    </div>
</div>
</body>
</html>

[_Layout.js]

$(document).ready(function () {
    $("#tabs").tabs();
});

[Index.cshtml]

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

Generated html:

<!DOCTYPE html>

<html>

<head>

    <title>Home Page</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>

    <script src="/Scripts/_Layout.js" type="text/javascript"></script>

</head>



<body>

    <div class="page">

        <div id="header">

            <div id="title">

                <h1>My MVC Application</h1>

            </div>

         <br />

    <div id="tabs">

       <ul>

          <li><a href="#tabs-1">Nunc tincidunt</a></li>

       </ul>

       <div id="tabs-1">

          <p>Tab 1 content</p>

       </div>

    </div>



        <div id="main">



<h2>Welcome to ASP.NET MVC!</h2>

<p>

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>



            <div id="footer">

            </div>

        </div>

    </div>

    </div>

</body>

</html>

For completeness I forgot to include the jquery ui css file:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

Thanks @Paul

I'm not familiar with @URL.Content, but can you confirm that those scripts are loading? — uadnal
– uadnal, Commented Mar 12, 2011 at 4:24
@Trevor: Yes, they show under the resources section of the chrome's dev tool bar. No missing resource errors. — O.O
– O.O, Commented Mar 12, 2011 at 4:26
@Trevor - Paul was right, I should have said that the tabs rendered, but were missing styles. My bad. — O.O
– O.O, Commented Mar 12, 2011 at 4:33

Paul · Accepted Answer · 2011-03-12 04:29:16Z

3

Try adding this to your head tag:

<link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

answered Mar 12, 2011 at 4:29

Paul

12.4k4 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI tabs not rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related