JQuery Диалог Проблема

Question

Привет всем, я разрабатываю приложение MVC, и я хочу использовать диалог Jquery.у меня есть следующий сценарий: у меня есть вид дерева Telerik, и когда я нажимаю на любой узел, я хочу, чтобы диалоговое окно открывалось и отображало информацию об этом узле.Сначала я добавляю следующий скрипт для инициализации диалога:

    $(document).ready(function () {
        $("#dialog").dialog("destroy");
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });
    });

, затем записываю следующий код в OnSelect (клиентское событие Telerik)

        $('#dialog-form').dialog('open');
        $('#dialog-form').load('<%= Url.Action("SomeAction", "SomeController") %>');

, на своей главной странице я добавилфайлы сценариев, которые необходимы для работы модального режима следующим образом:

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.resizable.js") %>"></script>

и когда я щелкаю узлы дерева, ничего не происходит, инструменты разработчика Chrome показывают следующую ошибку:

UncaughtTypeError: Object # не имеет метода 'dialog'

, похоже, что произошла ошибка при регистрации скрипта или что-то в этом роде

любая помощь с этим

Answer 1

Вам необходимо настроить порядок зависимостей, чтобы он был правильным, он должен быть:

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.mouse.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.resizable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>

Обратите внимание на добавление ui.mouse.

---

Но ... гораздо более простым подходом было бы просто включить пользовательский интерфейс jQuery в виде одного файла, если вы используете все компоненты, это проще, проще обновлять и меньше HTTP-запросов, например:

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.js") %>"></script>

Вы можете скачать библиотеку одним файлом здесь: jQuery UI Download .

Или из CDN, например, самой последней (на момент этого ответа) от Google:

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

Для преимуществ (они очень похожи на преимущества включения самого jQuery из CDN) см. Этот вопрос .

Answer 2

Проблема решена ... если вы хотите использовать Telerik Components в своих представлениях, вам нужно зарегистрировать свои скрипты в диспетчере скриптов, например:

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
   .Add("jquery-1.4.2.js")
   .Add("jquery.ui.core.js")
   .Add("jquery.ui.widget.js")
   .Add("jquery.ui.mouse.js")       
   .Add("jquery.ui.draggable.js")
   .Add("jquery.ui.button.js")       
   .Add("jquery.ui.resizable.js")
   .Add("jquery.ui.dialog.js")
   .Add("jquery.ui.position.js")

);
%>

Привет