When certain ASP.NET controls are in a jQuery Dialog their values are not in postback

I have a series of jQuery dialogs that contain ASP.NET form fields. I have a hidden ASP.NET button that is triggered when the user clicks a button in one of the jQuery dialogs. I can enter some data (listboxes and textboxes) and click the button that triggers the hidden button's event (an onClick) and the page will post back.

But, when I put a breakpoint in the onClick event in my codebehind I see that the form fields (reportTypeListBox.SelectedValue, etc.) just have the default values instead of the ones I entered. This happens unless I take the form fields out of the jQuery dialog, then it works perfectly.

I have another jQuery dialog that contains a ASP.NET textbox that is basically doing the same thing (triggering a hidden ASP.NET button with an onClick event) that works properly. The only difference is that its jQuery dialog is not in a seperate javascript function. It's right in the "$(document).ready(function () { }." While, the series of dialogs that are having trouble are in a function called "openDialog(selector)."

Here is my .js file:

$(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 repor开发者_如何学Got
$("#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("");

});

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

});

}

Sorry about the formatting of the code, hopefully you get what I'm talking about. Any idea whats going on?

I've had this too. It's because they get moved out of the <form> tag! Doh! I just used jQuery to move them back to their original place in the DOM on close.

EDIT: Sorry yes the <form> bit was removed from the post

try to add $(this).parent().appendTo($("form")); right before click event.

$("#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");
            }
        }

    })

Just add

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

in your code as:

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

            } }  });  });