Диалог jQuery UI с обратной передачей кнопки ASP.NET

Question

У меня отлично работает диалог jQuery UI на моей странице ASP.NET:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

Мой div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

Но btnButton_Click никогда не вызывается ... Как я могу это решить?

Дополнительная информация: я добавил этот код, чтобы переместить div в форму:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

Но все еще безуспешно ...

Answer 1

Это было самое ясное решение для меня

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

Весь контент внутри dlg2 будет доступен для вставки в вашу базу данных. Не забудьте изменить переменную dialog, чтобы она соответствовала вашей.

Answer 2

Я только что добавил следующую строку после того, как вы создали диалоговое окно:

$(".ui-dialog").prependTo("form");

Answer 3

Переместите диалоговое окно в правильном направлении, но вы должны делать это только при нажатии кнопки, открывающей диалоговое окно. Вот некоторый дополнительный код в примере jQuery UI:

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

Добавьте ваш asp:button в диалоге, и он работает хорошо.

Примечание: вы должны изменить на , чтобы предотвратить обратную передачу после нажатия кнопки «Создать пользователя».

Answer 4

Решение $('#dialog').parent().appendTo($("form:first")) отлично работает в IE 9. Но в IE 8 диалоговое окно появляется и исчезает напрямую. Вы не сможете увидеть это, если не разместите несколько предупреждений, поэтому кажется, что диалог никогда не появляется. Я провожу одно утро в поисках решения, которое работает на обеих версиях, и единственное решение, которое работает на обеих версиях 8 и 9:

$(".ui-dialog").prependTo("form");

Надеюсь, что это поможет другим, которые борются с той же проблемой

Answer 5

Используйте эту строку, чтобы эта работа работала при использовании опции modal: true.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

Answer 6

Решение от Роберта Маклина с наибольшим количеством голосов правильное на 99%. Но единственное дополнение, которое может потребоваться, как и я, это когда вам нужно открыть этот диалог jQuery, не забудьте добавить его к родителю. Как ниже:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Answer 7

Точное решение:

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});