0

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="#tabs-@descriptor.SequenceNumber">@descriptor.Title</a></li>
            }
        </ul>
        @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors)
        {
            <div id="tabs-@descriptor.SequenceNumber">
                <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?

Tim Long
  • 13,508
  • 19
  • 79
  • 147
  • fist of all test if jqueryUI really was loaded : http://stackoverflow.com/a/2263412/617373 , second check if you included all needed js/css , do view source on this example http://jsbin.com/ocecu5 – Daniel Sep 16 '12 at 07:30

2 Answers2

4

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?

Tim Long
  • 13,508
  • 19
  • 79
  • 147
  • Here it is: [Query Script included at bottom of page in mvc 4 template](http://stackoverflow.com/questions/11437063/jquery-script-included-at-bottom-of-page-in-mvc-4-template) – webdeveloper Sep 16 '12 at 09:06
  • For anyone else who stumbles here via Google etc another cause is that if you create a project from the default MVC template and then update jquery ui from the NuGet package manager then you wind up with a project where the bundle name in RegisterBundles is `~/bundles/jquery-ui` but the package name passed into the Scripts.Render function is `~/bundles/jqueryui` (i.e. no hyphen). – Mark Feldman Feb 14 '14 at 02:12
0

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.

Abhijit
  • 3
  • 2