Добавить диалог пользовательского интерфейса jQuery в форму ASP.NET в готовом документе

У меня есть диалог пользовательского интерфейса jQuery с ASP.NET. Я оборачиваю список флажков в диалоговое окно. Поскольку это «Редактировать страницу», некоторые флажки уже отмечены, поскольку данные извлекаются из базы данных при первой загрузке страницы.

У меня нет проблем, когда я нажимаю на ссылку, чтобы открыть диалоговое окно, и все работает так, как ожидалось. Однако, если я не нажму на ссылку, чтобы открыть диалоговое окно, эти значения флажков не будут выбраны из кода программной части, когда форма будет отправлена ​​​​обратно. Я понимаю, потому что диалог пользовательского интерфейса jQuery добавляет «div» к телу HTML за пределами элемента «формы» при загрузке страницы.

    //I'm trying to append dialog-dept to form on document ready like this but not yet working
     $("#dialog-dept").parent().appendTo($("form:first"));

Как сделать диалоговое окно пользовательского интерфейса jQuery частью тега «form», требуемого страницей ASP.NET при первой загрузке страницы?

Потому что на странице есть много других полей, а не только этот флажок. Иногда может не быть необходимости открывать диалоговое окно для выбора какого-либо флажка.

Приведенный ниже код работает хорошо, только если я нажимаю на ссылку, чтобы открыть диалоговое окно.

 $(document).ready(function() {

        // Dialog Link
        $('#dialog_link_dept').click(function() {
            $('#dialog-dept').dialog('open');
            return false;
        });

        // Launch Dialog
        $('#dialog-dept').dialog({
            autoOpen: false,
            width: 700,
            modal: true,
            open: function(type, data) {
                $(this).parent().appendTo("form");
            }
        });

    });
</script>

jquery asp.net jquery-ui jquery-ui-dialog
person Narazana    schedule 17.09.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете переместить его в <form> сразу после создания, даже если это autoOpen: false, вот так:

    $('#dialog-dept').dialog({
        autoOpen: false,
        width: 700,
        modal: true
    }).parent().appendTo("form");
person Nick Craver    schedule 17.09.2010
comment
Ник, спасибо за это предложение. Это работает, только если у меня есть только один диалог для добавления к форме. Я пробовал это с двумя диалогами, которые у меня есть, получаются только значения из одного диалога, значения из другого диалога - нет. Я все еще изучаю этот вопрос. Еще предложение.... - person Narazana; 17.09.2010
comment
@Narazana - этот код действует только на один элемент ... Идентификаторы должны быть уникальными, если у вас есть несколько id="dialog-dept", вам нужно переключиться на классы и использовать class="dialog-dept" и .dialog-dept в качестве селектора. - person Nick Craver; 17.09.2010
comment
Да, все идентификаторы для DIV, которые у меня есть, уникальны. Хорошо, так как этот код может применяться только к одному идентификатору, я переключаюсь на использование классов. Большое спасибо. - person Narazana; 17.09.2010

arrow_upward
1
arrow_downward

Я предполагаю, что таким образом формируется модальный диалог:

$("#dialog-dept").dialog({высота: 300, ширина: 250, модальный: true,appendTo:"form", title: "Title", show: {эффект: "fade", продолжительность: 500} , скрыть: { эффект: "свернуть", продолжительность: 500} });

и работает нормально для меня

person digikawa    schedule 13.03.2013