Что не так с моим кодом JQuery?

Question

Я дал свой код ниже,

        $(function() {
        $("get-reservation-id").click(function() {
            $(this).load("<%=Url.Action("GetReservation", "ModalPopup") %>", 
            function() {
                $("<div>").dialogr({
                    autoOpen: false,
                    width: 700,
                    title: 'Car Rental Application',
                    modal: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                });
            });
        });
    });

Этот код не создает всплывающее диалоговое окно jquery ui.

get-booking-id : это значение, присвоенное изображению, помещенному в тег привязки

GetReservation : частичное представление

ModalPopop : это имя контроллера (где у меня есть действие, которое возвращает GetReservation View)

Любая идея, почему это не работает. С другой стороны, я написал код, который работает. Смотри ниже

Рабочий код:

$("#vehicle-search-id").click(function() {
        $("#vehicle-search-id").load("/ModalPopup/VehicleSearch", 
            function() {
                $("#vehicle-search").dialogr({ 
                    width: 700, 
                    modal: false, 
                    title: 'Car Rental Application'
                });
        });
    });

Причина, по которой я решил не использовать это, заключается в том, что я хотел использовать <%=Url.Action("GetReservation", "ModalPopup") %> вместо /ModalPopup/VehicleSearch и хотел использовать более распространенный $("<div>").dialogr({, чем $("#vehicle-search").dialogr({

Большое спасибо

Моя цель

Я хочу создать всплывающее окно с помощью диалога Jquery и поставить частичный вид в нем.

Answer 1

Я думаю, вы хотите это:

$(function() {
    $("get-reservation-id").click(function() {
        var that = $(this);
        that.load('<%=Url.Action("GetReservation", "ModalPopup") %>', 
        function() {
            that.dialog({
                autoOpen: false,
                width: 700,
                title: 'BMS Car Rental Application',
                modal: true,
                overlay: {
                    opacity: 0.5,
                    background: "black"
                }
            });
        });
    });
});

Answer 2

Я заметил, что в первом примере для опции autoOpen установлено значение false. Таким образом, первый фрагмент кода в вашем вопросе создаст диалоговое окно jQuery, но не откроет его. Я бы предложил либо установить для параметра autoOpen значение true (по умолчанию), либо включить строку кода, чтобы открыть диалоговое окно в другом месте.

Answer 3

Ваши селекторы jQuery имеют неправильную форму.Используйте $("#get-reservation-id") для выбора элемента с этим идентификатором и $("div") для выбора всех div тегов.

Я также подозреваю, что вы не хотите выбирать все div s в 5-й строке,но я не знаю, что вы делаете хотите выбрать, поэтому не можете сделать никаких предложений.Я предлагаю вам взглянуть на документацию jQuery Selectors .

Редактировать: Мне кажется, я вижу, что вы делаете.Вы извлекаете ответ HTML из Url.Action("GetReservation", "ModalPopup") и хотите отобразить модальное диалоговое окно с содержимым, взятым из (предположительно только) div в этом ответе.

В этом случае вам нужно $("div")в вашей строке 5. Помните, что селекторы jQuery работают как селекторы CSS - $('div') выбирает все div элементы, $('#foo') выбирает элемент с идентификатором "foo", а $('.bar') выбирает все элементы с классом "bar".

Answer 4

Вот исправленный код

$(function() {

        $("#get-reservation-id").click(function() {

            $("<div>").dialogr({
                title: 'Title',
                minHeight: 400,
                minWidth: 600,
                width: 800,
                height: 600,
                modal: true,
                open: function() {
                $(this).load('<%= Url.Action("GetReservation", "ModalPopup") %>');
                },
                buttons: {
                    "Ok": function() { $(this).dialogr("close"); },
                    "Cancel": function() { $(this).dialogr("close"); }
                }
            });
        });

        return false;
    });