Geek Answers Handbook

Object does not support dialog of properties or methods'

Referring to Link , I created an MVC interface dialog box.
Here is my code:
In 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 in both IE and Firefox. Firefox throws "Typeerror $ (...). Dialog is not a function" and IE throws the Object does not support the dialog of properties or methods .
Any suggestions. What a mistake in my code. Why is there a dialog error?

+8
jquery firefox internet-explorer asp.net-mvc-3
source share
5 answers

Something comes to mind that can be verified:

  • Never print URLs in an ASP.NET MVC application. Always use helpers (or packages that 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 do not have a call to @Scripts.Render("~/bundles/jquery") , because this will include jQuery twice.

  • If at the end of your _Layout.cshtml you have a dedicated section for custom scripts such as @RenderSection("scripts", required: false) , make sure you place your own script in this section (note that since this is a RenderSection located at the end of the DOM you don’t need to wrap your script in the document.ready event, because by the time it is executed, the DOM is already loading)

     <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> }
+14
source share

In my case, this error occurred because I forgot to add a link to the jquery-ui file:

 <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>
+7
source share

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

You must include jquery-{version}.js , then jquery-ui-{version}.js . Then, before the </body> specify your custom javascript file.

It will resolve the Javascript runtime error: [Object does not support the dialog of properties or methods], ['$' is undefined]

+1
source share

It seems to me that your code looks fine. You can verify that the jQuery user interface contains a dialog box (or try downloading the full jQuery user interface for testing) and make sure the URI for the JS script is correct.

0
source share

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
source share

More articles:


All Articles