Ошибка: TypeError: $(...). Dialog не является функцией

У меня возникла проблема с тем, что диалог работает как базовая функциональность. Вот мой источник импорта jQuery:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

Html:

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
</script>

От сообщений вокруг кажется как проблема импорта библиотеки. Я загрузил зависимости JQuery UI Core, Widget, Mouse и Position.

Любые идеи?

Ответ 1

Не забудьте вставить полную версию jQuery UI. Также вы должны сначала начать диалог:

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

Ответ 2

Если вы закомментируете следующий код со страницы _Layout.cshtml, модальное всплывающее окно начнет работать:

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>

Ответ 3

если по какой-либо причине загружены две версии jQuery (что не рекомендуется), вызов $.noConflict(true) из второй версии вернет переменные jQuery с глобальной областью действия для переменных первой версии.

Иногда это может быть проблема со старой версией (или не стабильной версией) файлов JQuery

Решение использовать $.noConflict();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
});
// Code that uses other library $ can follow here.
</script>

Ответ 4

Я просто испытал это с помощью строки:

$('<div id="editor" />').dialogelfinder({

Я получил ошибку "dialogelfinder не является функцией", потому что другой компонент вставлял вызов для загрузки более старой версии JQuery (1.7.2) после загрузки более новой версии.

Как только я прокомментировал вторую нагрузку, ошибка исчезла.

Ответ 5

Вот полный список скриптов, необходимых для устранения этой проблемы. (Убедитесь, что файл существует на указанном пути к файлу)

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

а также включить ссылку css в _Layout.cshtml для стильного всплывающего окна.

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

Ответ 6

У меня была аналогичная проблема, и в моем случае проблема была другой (я использую шаблоны Django).

Порядок JS был неправильным (я знаю, что первое, что вы проверяете, но я был почти уверен, что это не так, но это было). Js, вызывающий диалог, вызывается до того, как была вызвана библиотека jqueryUI.

Я использую Django, поэтому наследовал шаблон и использовал {{super.block}} для наследования кода из блока и шаблона. Мне пришлось переместить {{super.block}} в конце блока, который решил проблему. Js, вызывающий диалог, был объявлен в классе Media в Django admin.py. Я потратил больше часа, чтобы понять это. Надеюсь, это поможет кому-то.

Ответ 7

Измените jQueryUI на версию 1.11.4 и убедитесь, что jQuery не добавляется дважды.