Object doesn't support property or method 'dialog'

Question

Refering the AjaxControlToolkit, I created a UI dialog from MVC.

Layout.cshtml

 <head>
   <meta charset="utf-8" />
   <title>@ViewBag.Title - My ASP.NET MVC Application</title>
   <link href="../../Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
   <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
   <script src="../../Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
   <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
   <meta name="viewport" content="width=device-width" />
   @Styles.Render("~/Content/css")
   @Scripts.Render("~/bundles/modernizr")
</head>

Index.cshtml

<h2>jQuery UI Hello World</h2>          
<button id="show-dialog">Click to see jQuery UI in Action</button>            
<div id="dialog" title="jQuery UI in ASP.NET MVC" >  
  <p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>  
</div>  

<script language="javascript" type="text/javascript">
  $(function () {
    $('#dialog').dialog({
      autoOpen: false,
      width: 600,
      buttons: {
        "Ok": function () { $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
      }
    });
    $("#show-dialog").button().click(function () {
        $('#dialog').dialog('open');
        return false;
    });
  });  
</script>

I checked both in IE and Firefox. Firefox throws

Typeerror $(...).dialog is not a function

IE throws

Object doesn't support property or method 'dialog'

Any suggestions?

Why is your `Index.cshtml` using the WebForms syntax? What you have shown is an invalid Razor view. — Darin Dimitrov, Mar 28 '13 at 10:47

Darin Dimitrov · Accepted Answer · 2013-04-01T05:47:31.430

3 things come to mind that might be worth checking:

Never hardcode urls in an ASP.NET MVC application. Always use helpers (or bundles which are recommended):

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet"  type="text/css" />
    <script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Make sure that at the end of your _Layout.cshtml you don't have a @Scripts.Render("~/bundles/jquery") call because this would include jQuery twice.

If at the end of your _Layout.cshtml you have a dedicated section for custom scripts like @RenderSection("scripts", required: false), make sure that you have placed your custom script in that section (notice that since this RenderSection is at the end of the DOM you don't need to be wrapping your script in a document.ready event because by the time it executes, the DOM will already be loaded):

<h2>jQuery UI Hello World</h2>          
<button id="show-dialog">Click to see jQuery UI in Action</button>            
<div id="dialog" title="jQuery UI in ASP.NET MVC" >  
   <p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>  
</div>    

@section scripts {
    <script type="text/javascript">
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Ok": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
        $("#show-dialog").button().click(function () {
            $('#dialog').dialog('open');
            return false;
        });
    });  
    </script>
}

@PankajGarg, I have updated the answer so that you can rollback your downvote. — Darin Dimitrov, Apr 01 '13 at 05:48

score 9 · Answer 2 · answered Nov 05 '14 at 16:49

In my case, this error was because I had forgotten to add the jquery-ui file reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>

score 3 · Answer 3 · answered Sep 08 '15 at 20:36

3

This commonly happens when you forget to add jquery-ui.js. The order of including jquery-ui-{version}.js also matters!

You should include jquery-{version}.js then jquery-ui-{version}.js. Then just before </body> tag, include your custom javascript file.

It will solve Javascript runtime error: [Object doesn't support property or method 'dialog'],['$' is undefined]

answered Sep 08 '15 at 20:36

DevelopZen

375
4
6

Thanks for pointing out the importance of the order - that's what fixed my issue. – EJoshuaS - Stand with Ukraine Mar 01 '17 at 21:59

score 1 · Answer 4 · answered Mar 28 '13 at 10:57

1

Your code seems OK to me. You could check that your jQuery UI custom contains dialog feature (or try downloading full jQuery UI for testing purposes) and check that the URI to the JS script is correct.

answered Mar 28 '13 at 10:57

ngasull

4,206
1
22
36

score 1 · Answer 5 · edited Mar 01 '17 at 21:55

1

Include these three lines of code:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>

edited Mar 01 '17 at 21:55

EJoshuaS - Stand with Ukraine

11,977
56
49
78

answered May 04 '16 at 10:43

Willow

59
1
9

Object doesn't support property or method 'dialog'

Layout.cshtml

Index.cshtml

5 Answers5

Linked