Диалог JQuery UI не работает при объявлении в index.cshtml, но работает в частичном представлении

Question

Диалог JQuery UI не работает при объявлении в index.cshtml, но работает в частичном представлении

0

Я использую диалог JQuery UI для CRUD в своем приложении. Диалог объявлен как:

$(document).ready(function () {
        $.ajaxSetup({ cache: false });

        $(".openDialog").on("click", function (e) {
            e.preventDefault();


            $("#dialog-edit").dialog({
                title: 'Add Student',
                autoOpen: false,
                resizable: false,
                height: 'auto',
                width: 650,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,

                open: function (event, ui) {
                    $(this).load("/Projekti/UnosuProjekat")
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                },

                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog-edit").dialog('open');
            return false;
        });
    });

Когда я помещаю этот код в index.cshtml, который отображает частичный вид, где мне нужен диалог, он не работает. Когда я помещаю его в частичный вид, где объявлена кнопка, которая запускает диалог, все работает нормально.

Что не так с этим?

onedevteam.com 15 апр. 2014, в 14:57

Источник

1

Как вы отображаете свой частичный вид? Вы можете попробовать проверить, является ли # dialog-edit нулевым или неопределенным, перед запуском диалога.
thsorens 15 апр. 2014, в 12:19
0

@ Html.Partial ("_partal", Model, null). Когда я открываю представление исходного кода в FF, сценарий показывается там в обоих случаях, просто не работает, когда физически не находится внутри _partial ...
onedevteam.com 15 апр. 2014, в 12:21
0

хорошо, просто должен был исключить, что вы сделали это с помощью ajax;) Как я уже говорил, попробуйте сначала проверить, является ли диалоговое редактирование пустым или неопределенным, что может объяснить больше.
thsorens 15 апр. 2014, в 12:23
0

Я на самом деле использую ajax.actionlink для создания ссылки ".openDialog", а "# dialog-edit" - это пустой div, объявленный внутри "_partial"
onedevteam.com 15 апр. 2014, в 12:30
0

Так что это объясняет это тогда. При использовании ajax-вызовов вы отображаете частичное представление при нажатии на ссылку. Что происходит после $ (document) .ready. Когда у вас есть скрипт в частичном представлении, он работает, потому что частичное представление достигнет своего состояния «document.ready», когда запрос завершится.
thsorens 15 апр. 2014, в 12:34
0

Я не уверен, что понимаю это ... У меня есть index.cshtml. Внутри индекса есть вызов part ("_ p1"), где отображается ajax.actionlink, и у ajax.actionlink есть щелчок, где выполняется jquery, чтобы вызвать другое частичное представление, которое будет в диалоговом окне jquery ui.
onedevteam.com 15 апр. 2014, в 12:39
0

Ajax.ActionLink отправляет httprequest, который отображает ваше частичное представление, содержащее div для редактирования диалога. Это означает, что когда вы загружаете свою страницу, она будет загружена в два запроса. Один для вашей главной страницы и все части включены без ajax, а другой для вашего ajax-вызова. Ajax-вызов не будет зависеть от запроса на вашу главную страницу, исключая его из события document.ready, которое запускается на вашей главной странице
thsorens 15 апр. 2014, в 12:43

Показать ещё 5 комментариев

Теги:

jquery

razor

asp.net-mvc

asp.net-mvc-4

1 ответ

Ещё вопросы

Как вы отображаете свой частичный вид? Вы можете попробовать проверить, является ли # dialog-edit нулевым или неопределенным, перед запуском диалога.
@ Html.Partial ("_partal", Model, null). Когда я открываю представление исходного кода в FF, сценарий показывается там в обоих случаях, просто не работает, когда физически не находится внутри _partial ...
хорошо, просто должен был исключить, что вы сделали это с помощью ajax;) Как я уже говорил, попробуйте сначала проверить, является ли диалоговое редактирование пустым или неопределенным, что может объяснить больше.
Я на самом деле использую ajax.actionlink для создания ссылки ".openDialog", а "# dialog-edit" - это пустой div, объявленный внутри "_partial"
Так что это объясняет это тогда. При использовании ajax-вызовов вы отображаете частичное представление при нажатии на ссылку. Что происходит после $ (document) .ready. Когда у вас есть скрипт в частичном представлении, он работает, потому что частичное представление достигнет своего состояния «document.ready», когда запрос завершится.
Я не уверен, что понимаю это ... У меня есть index.cshtml. Внутри индекса есть вызов part ("_ p1"), где отображается ajax.actionlink, и у ajax.actionlink есть щелчок, где выполняется jquery, чтобы вызвать другое частичное представление, которое будет в диалоговом окне jquery ui.
Ajax.ActionLink отправляет httprequest, который отображает ваше частичное представление, содержащее div для редактирования диалога. Это означает, что когда вы загружаете свою страницу, она будет загружена в два запроса. Один для вашей главной страницы и все части включены без ajax, а другой для вашего ajax-вызова. Ajax-вызов не будет зависеть от запроса на вашу главную страницу, исключая его из события document.ready, которое запускается на вашей главной странице

thsorens · Accepted Answer · 2014-04-15T10-55-00.000Z

В вашем теге index-script:

function Initiate_Dialog(){
        $("#dialog-edit").dialog({
            title: 'Add Student',
            autoOpen: false,
            resizable: false,
            height: 'auto',
            width: 650,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,

            open: function (event, ui) {
                $(this).load("/Projekti/UnosuProjekat")
            },
            close: function (event, ui) {
                $(this).dialog('close');
            },

            buttons: {
                "Delete all items": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog-edit").dialog('open');
        return false;
}

В вашей ajax.actionlink

Добавьте ajaxoptions, который позволяет запускать javascript OnSuccess. Затем он должен вызвать функцию Initiate_Dialog.