CODEWITHSUNDEEP
javascriptasp.net-mvcjquery-uirazorasp.net-mvc-4
Tim Long
Tim Long

Reputation: 13778

Why won't my JQuery-UI tabs control render correctly?

This is driving me nuts. I'm a JQuery noob and this is my first go at using it. I've followed the example on the jQuery-ui web site, but my script fragment gives an error:

on line $("#tabs").tabs(); Error: 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'tabs'

So, here's what I'm doing. I am developing an ASP.NET MVC4 web app. The jQuery scripts and styles are in the default bundles for the site, and are rendered in my _Layout.cshtml 'master page', like so:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
    </head>

Here is my View:

@using Tigra.eStore.BusinessLogic.DomainObjects
@model Tigra.eStore.Storefront.Models.ProductDetailsViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
    <legend>@Model.Product.Name</legend>
    <div class="display-field">
        @Html.DisplayFor(model => model.Product.Name)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Add to Cart", "Add", "ShoppingCart", new {id = Model.Product.Id}, new {})
    @Html.ActionLink("Back to List", "Index")
</p>

<script>
    $(function() {
        $("#tabs").tabs();
    });
</script>

<div class="descriptors">
    <div id="tabs">
        <ul>
            @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors)
            {
                <li><a href="#[email protected]">@descriptor.Title</a></li>
            }
        </ul>
        @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors)
        {
            <div id="[email protected]">
                <p>@descriptor.Description</p>
            </div>
        }
    </div>
</div>

I'm pretty sure that jQuery-ui is getting loaded, because it shows up at runtime like so: Visual Studio shows the loaded scripts

It's got to be something simple - sorry if this is blindingly obvious but as I said, I'm a noob at this stuff. Can you see what I'm doing wrong?

Upvotes: 0

Views: 7020

Answers (2)

Abhijit
Abhijit

Reputation: 3

That's has been done keeping performance in consideration. Instead of changing position

@Scripts.Render("~/bundles/jquery")

follow below steps.

In your layout page after @Scripts, add:

@RenderSection("scripts", false)

then in your view its

@section scripts{
 <script type="text/javascript>
 // view scriptt goes here
 </script> 
}

This section can come before or after the view html, but will always render after.

Upvotes: 0

Tim Long
Tim Long

Reputation: 13778

Solved it! .

The clue is in my screen snipping, you can see that jquery-1.7.1 is loaded twice. The Microsoft template project renders the jquery bundle right at the bottom of the _Layout.cshtml page. Why? I don't know - but I overlooked it. So I went ahead and added it at the top of the page, along with jquery-ui. It seems that the second rendering of jquery wipes out jquery-ui.

So my fix is to delete the @Scripts.Render("~/bundles/jquery") line from near the bottom of the file, leaving mine at the top. Works like a charm.

Now I wonder why Microsoft put that at the bottom? Any ideas?

Upvotes: 4

Related Questions