CODEWITHSUNDEEP
jqueryasp.net-mvcrazorasp.net-mvc-4
Nate
Nate

Reputation: 837

javascript ui accordion

I'm trying to use accordion in my project. As i understood, javascript links should be added in Layout page, and javascript code in index page, where it has to be displays. But browser says that $(#"accordion").accordion is not a function. Here is code of _Layout.

@using kazwaySite
<!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/themes/base/css", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

   <link type="text/css" href="~/Scripts/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />  
   <script type="text/javascript" src="@Url.Content("~/Scripts/js/jquery-1.7.2.min.js")"></script>
   <script type="text/javascript" src="@Url.Content("~/Scripts/js/jquery-ui-1.8.22.custom.min.js")"></script>

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink(Resources.mainPage , "Index", "Home")</li>
                            <li>@Html.ActionLink(Resources.aboutPage, "About", "Home")</li>
                            <li>@Html.ActionLink(Resources.productsPage, "Index", "Home")</li>
                            <li>@Html.ActionLink(Resources.capabilitiesPage, "Index", "Home")</li>
                            <li>@Html.ActionLink(Resources.newsPage, "About", "Home")</li>
                            <li>@Html.ActionLink(Resources.partnersPage, "Index", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper" >
            <table >
            <tr style="font-size:20px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>
            <tr style="font-size:12px;font-weight:500;">
            <td>@Html.ActionLink("О компании", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            <td>@Html.ActionLink("Возможности", "About", "Home")</td>
            <td>@Html.ActionLink("Новости", "About", "Home")</td>
            <td>@Html.ActionLink("О продукции", "About", "Home")</td>
            </tr>

            </table>
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - ONM Web studio</p>
                </div>
                <div class="float-right">
                    <ul id="social">
                        <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                        <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Code of index.cshtml

@model IEnumerable<kazwaySite.Models.News>


    <script type="text/javascript">
        $(function () {
            $("#accordion").accordion({ header: "h3" });
        });
   </script>
        <div id="accordion">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>

Upvotes: 0

Views: 2012

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

You have done a complete mess with your javascript inclusions. You have included jquery multiple times (once in the head and once in the bottom), you haven't overriden the scripts section that you have defined in your Layout inside your view, ...

Let's try cleaning things up. Since this is an ASP.NET MVC 4 applications I would recommend you using bundles. Out of the box there are many bundles but you get one for jquery and one for jqueryui. Those 2 are enough. You don't need to be including bundles and scripts separately. This completely defeats the purpose of bundles and you often end up with dupe scripts, ... So go ahead in your ~/App_Start/BundleConfig.cs file and define the bundles you want to use. Update NuGets if you want to use more recent versions of the scripts. At the end of the day you should have the required scripts in the ~/Scripts folder and bundle ids configured for them.

@using kazwaySite
<!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/themes/base/css", "~/Content/css")
        <link type="text/css" href="~/Scripts/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />  
    </head>
    <body>
        ... some markup ommited for clarity ...

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @RenderSection("scripts", required: false)
    </body>
</html>

and inside your view:

@model IEnumerable<kazwaySite.Models.News>

@section scripts {
    <script type="text/javascript">
        $("#accordion").accordion({ header: "h3" });
    </script>
}

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

Upvotes: 1

gor
gor

Reputation: 11658

If function accordion is not defined, then jquery ui is not loaded. Check in browser, that link points to correct location.

Upvotes: 2

Related Questions