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?