当某些 ASP.NET 控件在 jQuery 对话框中时，它们的值不在回发中

Question

我有一系列包含 ASP.NET 表单字段的 jQuery 对话框。我有一个隐藏的 ASP.NET 按钮，当用户单击其中一个 jQuery 对话框中的按钮时会触发该按钮。我可以输入一些数据（列表框和文本框）并单击触发隐藏按钮事件的按钮（onClick），然后页面将返回。

但是，当我在代码隐藏中的 onClick 事件中放置断点时，我看到表单字段（reportTypeListBox.SelectedValue 等）只有默认值，而不是我输入的值。除非我将表单字段从 jQuery 对话框中取出，否则会发生这种情况，然后它就可以完美运行。

我有另一个 jQuery 对话框，其中包含一个 ASP.NET 文本框，它基本上在做同样的事情（使用 onClick 事件触发一个隐藏的 ASP.NET 按钮），它可以正常工作。唯一的区别是它的 jQuery 对话框不在单独的 javascript 函数中。它就在“$(document).ready(function () { }”中。而有问题的一系列对话框在一个名为“openDialog(selector)”的函数中。

这是我的 .js 文件：

$(document).ready(function () {

drawSpeedometerRound("chartdiv");
drawSpeedometerLine("chartdiv");

//create main column tabs
$("#tabs").tabs();

//NEW REPORT DIALOG
//hide wizard dialog divs
$("#wizardPg1").hide();
$("#wizardPg2").hide();
$("#wizardFlat").hide();

//hide wizard onClick buttons
$("[id$='_reportWizardTypeChoose']").hide();

//open wizard dialog pg 1 to begin creation of new report
$("#newReport").click(function () {
    openDialog("#wizardPg1");
});

//NEW CHART DIALOG
//hide chart wizard dialog divs
$("#chartWizardPg1").hide();
$("#chartWizardPg2").hide();

//wizard dialog page 1. Walks user through creation of new report
$("#chartWizardPg1").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    height: 400,
    width: 400,
    title: "New Chart Wizard",
    buttons: {
        "Next >": function () {
            $(this).dialog("close");
            $("#chartWizardPg2").dialog("open");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#chartWizardPg2").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    height: 400,
    width: 400,
    title: "New Chart Wizard",
    buttons: {
        "Next >": function () {
            $(this).dialog("close");
        },
        "< Back": function () {
            $(this).dialog("close");
            $("#chartWizardPg1").dialog("open");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }

});

//open wizard dialog pg 1 to begin creation of new report
$("#newChart").click(function () {
    $("#chartWizardPg1").dialog("open");

});

//NEW QUERY DIALOG
//hide new query dialog
$("[id$='_querySubmit']").hide();
$("#queryDialog").hide();

//dialog for entering custom SQL query
$("#newQueryButton").click(function () {
    $("#queryDialog").dialog({
        modal: true,
        title: "Enter Sql Query",
        width: 500,
        buttons: {
            "Submit Query": function () {
                $(this).dialog("close");
                $("[id$='_querySubmit']").trigger("click");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    }).parent().appendTo($("form"));
});

$("#exportDialog").hide();
$("[id$='_exportPDF']").hide();
$("[id$='_exportPrinter']").hide();
$("[id$='_exportDoc']").hide();

$("#export").click(function () {
    $("#exportDialog").dialog({
        title: "Export",
        buttons: {
            "PDF": function () {
                $(this).dialog("close");
                $("[id$='_exportPDF']").trigger("click");
            },
            "Word": function () {
            },
            "Excel": function () {
            },
            "Printer": function () {
            },
            "Close": function () {
                $(this).dialog("destroy");
            }
        }
    });
});

//display "message" p tags as popups
function messageDialog() {
    if ($("[id$='_message']").text() != "") {
        $("[id$='_message']").dialog({
            modal: true,
            resizable: false,
            title: $("[id$='_messageTitle']").text()

        });
    }
}

//alternate row colors
$("#reportTable tbody tr:even").addClass("even");
$("#reportTable tbody tr:odd").addClass("odd");

messageDialog();

//calculate number of cols in report
//var columns = ($("#firstCol").nextAll().length + 1);

//$("[id$='_sqlQuery']").val("");

});

函数 openDialog(选择器) { $(document).ready(function () {

    //wizard dialog page 1. Walks user through creation of new report
    $("#wizardPg1").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 400,
        width: 400,
        title: "New Report Wizard",
        buttons: {
            "Next >": function () {
                $(this).dialog("close");
                $("#wizardPg2").dialog("open");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    }).parent().appendTo($("form"));

    $("#wizardPg2").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 400,
        width: 400,
        title: "New Report Wizard",
        buttons: {
            "Next >": function () {
                $(this).dialog("close");
                $("[id$='_reportWizardTypeChoose']").trigger("click");
            },
            "< Back": function () {
                $(this).dialog("close");
                $("#wizardPg1").dialog("open");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }

    }).parent().appendTo($("form"));

    $("#wizardFlat").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 400,
        width: 400,
        title: "New Report Wizard - Flat Table",
        buttons: {
            "Next >": function () {
                $(this).dialog("close");
            },
            "< Back": function () {
                $(this).dialog("close");
                $("#wizardPg2").dialog("open");
            },
            "Cancel": function () {
                $(this).dialog("destroy");
            }
        }

    }).parent().appendTo($("form"));

    $(selector).dialog("open");

});

}

对代码的格式感到抱歉，希望你明白我在说什么。知道发生了什么吗？

Answer 1

我也遇到过。这是因为他们被移出了<form> 标签！嗬！我刚刚使用 jQuery 将它们移回它们在 DOM 中的原始位置。

编辑：抱歉，<form> 位已从帖子中删除

Answer 2

尝试添加 $(this).parent().appendTo($("form"));就在点击事件之前。

$("#wizardPg2").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 400,
        width: 400,
        title: "New Report Wizard",
        buttons: {
            "Next >": function () {
                $(this).dialog("close");

                $(this).parent().appendTo($("form")); //ADD HERE!

                $("[id$='_reportWizardTypeChoose']").trigger("click");
            },
            "< Back": function () {
                $(this).dialog("close");
                $("#wizardPg1").dialog("open");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }

    })

Answer 3

只需添加

open: function(type, data) {
$(this).parent().appendTo("form");
}

在您的代码中为：

var dialogId="#dialog-form";
$(function() {
    $( dialogId ).dialog({
        autoOpen: false,
        height: 200,
        width: 150,
        modal: true,

        open: function(type, data) {
                    $(this).parent().appendTo("form");
                },
        buttons: {
            "Submit": function() {
                __doPostBack('<%=ASPBTN.ClientID %>', '');
                $( this ).dialog( "close" );

            } }  });  });