Object doesn't support property or method '

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?

标签： jquery asp.net-mvc-3

5条回答

淡お忘

2楼-- · 2020-03-14 02:37

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>
}

0人赞添加讨论(0) 举报

可以哭但决不认输i

3楼-- · 2020-03-14 02:37

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]

0人赞添加讨论(0) 举报

Ridiculous、

4楼-- · 2020-03-14 02:37

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.

0人赞添加讨论(0) 举报

Ridiculous、

5楼-- · 2020-03-14 02:44

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>

0人赞添加讨论(0) 举报

时光不老，我们不散

6楼-- · 2020-03-14 03:00

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>

0人赞添加讨论(0) 举报