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

Question

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

});

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?

Answer 1

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