当某些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（selector）{$（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

只需添加

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" );

            } }  });  });

Answer 3

尝试添加$（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");
            }
        }

    })