Объект не поддерживает свойство или метод "dialog"

ссылаюсь на AjaxControlToolkit, Я создал диалог пользовательского интерфейса из MVC.

макет.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>
.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>

Я проверил как в IE, так и в Firefox. В Firefox бросает

Typeerror $(...).диалог не является функцией

IE бросает

объект не поддерживает свойство или метод dialog''

какие предложения?

8
asp.net-mvc-3 jquery

5 ответов

3 вещи приходят в голову, что, может быть, стоит проверить:

  1. никогда не hardcode urls в ASP.NET приложение MVC. Всегда используйте помощники (или пакеты, которые рекомендуется):

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

  2. убедитесь, что в конце _Layout.cshtml нет @Scripts.Render("~/bundles/jquery") вызов, потому что это будет включать jQuery дважды.

  3. если в конце _Layout.cshtml у вас есть специальный раздел для пользовательских скриптов, таких как @RenderSection("scripts", required: false) делают уверены, что вы поместили ваш скрипт в этом разделе (обратите внимание, что с этого RenderSection в конце дом вам не нужно будет оборачивать скрипт в документ.готовое событие, потому что к моменту его выполнения DOM уже будет загружен):

    <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

в моем случае эта ошибка была вызвана тем, что я забыл добавить ссылку на файл jQuery-ui:

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

это обычно происходит, когда вы забываете добавить jquery-ui.js. Порядок включения jquery-ui-{version}.js также имеет значение!

вы должны включить jquery-{version}.js затем jquery-ui-{version}.js. Тогда как раз перед </body> tag, включите свой пользовательский файл javascript.

это решит ошибку выполнения Javascript: [объект не поддерживает свойство или метод dialog''], ['$' является undefined]

3

ваш код кажется мне в порядке. Вы можете проверить, что ваш пользовательский интерфейс jQuery содержит функцию диалога (или попробуйте загрузить полный jQuery UI для целей тестирования) и проверьте правильность URI для сценария JS.

1

включить эти три строки кода:

<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