Databases
StackOverflow2013
Postsdbo
POWhen certain ASP.NET controls are in a jQuery Dialog their values are not in postback
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhen certain ASP.NET controls are in a jQuery Dialog their values are not in postback
    text
    copied!<p>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.</p> <p>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.</p> <p>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)."</p> <p>Here is my .js file:</p> <pre><code>$(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 &gt;": 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 &gt;": function () { $(this).dialog("close"); }, "&lt; 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(""); </code></pre> <p>});</p> <p>function openDialog(selector) { $(document).ready(function () {</p> <pre><code> //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 &gt;": 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 &gt;": function () { $(this).dialog("close"); $("[id$='_reportWizardTypeChoose']").trigger("click"); }, "&lt; 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 &gt;": function () { $(this).dialog("close"); }, "&lt; Back": function () { $(this).dialog("close"); $("#wizardPg2").dialog("open"); }, "Cancel": function () { $(this).dialog("destroy"); } } }).parent().appendTo($("form")); $(selector).dialog("open"); }); </code></pre> <p>}</p> <p>Sorry about the formatting of the code, hopefully you get what I'm talking about. Any idea whats going on?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload