CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
user3775501
user3775501

Reputation: 208

JQuery UI Undefined is not a Function error with Dialog Box

I am having difficulties with basic use of the JQuery UI library in ASP.NET MVC5. While I am using its autocomplete with no issues, any time I try to use the dialog box I get an 'undefined is not a function' error on the .dialog line. Given I am using autocomplete it would suggest that the UI script is loaded.

To examine it further I've stripped it all away so it's just the dialog on the index page of the basic MVC template with the simplest of all changes - for the html, a div for the dialog box and a button to open it, and for the scripts, linking to the external libraries in the correct order - JQuery then JQuery UI (while having taken out the jquery bundling). Below is the page source for the produced page which still generates the same error.

Any idea as to what I am doing wrong?

Thanks in advance,

Robert

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/css?v=m8KdMFOCcNeZrATLbCQ_9gxex1_Ma7rE5iJzJXojUIk1" rel="stylesheet"/>
    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

   <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

    <script>
    $(document).ready(function () {
        ('#dialogA').dialog();
    });
    </script>

    <script>
        $(document).ready(function () {
            $('#btnDialog').button().click(function (e) {
                $('#dialogA').dialog("open");
            })
        });
    </script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>

    <div id="dialogA">ttttt</div>
    <input type="button" value="dialogbox" id="btnDialog" />

        <div class="container body-content">

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>
            <hr />
            <footer>
                <p>&copy; 2014 - My ASP.NET Application</p>
            </footer>
        </div>

        <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"010dfa370b8b4623bca1627473c2aaa0"}
</script>
<script type="text/javascript" src="http://localhost:43955/192d8c642ad44cee87f18b841afbf972/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Upvotes: 0

Views: 2739

Answers (1)

Jason Geiger
Jason Geiger

Reputation: 2112

Typo: You're missing the $ before ('#dialogA').dialog().

@Barmar supplied the answer in comments above. Put into official answer for closure.)

Upvotes: 1

Related Questions