Implementing JQuery UI 1.8.2 custom themes in ASP.Net MVC2

Question

HI,
I am new to JQuery. I am having issues implementing the same. I want to use the tab from the JQuery custom themes. The issue is that the css don't seem to apply. I have gone through a lot of blogs etc on google but nothing seem to work for me.

I have followed what is mention here.

I am also pasting the contents of site.master and /home/index.aspx here.

Site.Master - the header section looks like this

<link href="../../Content/Site.css" rel="stylesheet" type="text/css"/>  
<link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />  
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript">
</script>  
<script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>`

index.aspx:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>  

Home Page

</asp:Content>  
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
<script type="text/javascript">
    // Tabs
    $('#tabs').tabs();</script>`  
<h2 class="demoHeaders">  
Tabs</h2>  
<div id="tabs">  
    <ul>  
        <li><a href="#tabs-1">First</a></li>  
        <li><a href="#tabs-2">Second</a></li>  
        <li><a href="#tabs-3">Third</a></li>  
    </ul>  
    <div id="tabs-1">  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </div>  
    <div id="tabs-2">  
        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
        bibendum.  </div>  
    <div id="tabs-3">  
        Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
        urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
        ullamcorper augue.  </div>  
</div>  <h2>
    <%: ViewData["Message"] %></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&lt;/a&gt;.  
</p>  

can anybody spot any obvious errors?

Many thanks in advance, jankajg

Answer 1

Your initialising the tabs to early. When you run the script the tabs element has not been parsed, one way to check this is to always check the .length property of the jquery object to ensure, in the case of an id that it is 1.

To fix: either wrap the script in a document ready statement

<script type="text/javascript">
    // Tabs
$(function(){
    $('#tabs').tabs();
});

</script>

or move the script tag down to the bottom of the document just before the closing body tag.

<script type="text/javascript">
        // Tabs
        $('#tabs').tabs();
</script>
</body>