3

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?

3 Answers 3

2

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

2
  • Out of the form tag you mean?
    – Gagege
    Aug 13, 2010 at 16:26
  • I tried this at the end of my openDialog(): $(window).unload(function () { $("#wizardPg1").parent().appendTo($("form")); $("#wizardPg2").parent().appendTo($("form")); $("#wizardFlat").parent().appendTo($("form")); }); Is this what you meant? It didn't work for me.
    – Gagege
    Aug 13, 2010 at 16:52
2

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

    })
2
  • this is for jquery to insert record back into the dom
    – kiev
    Dec 28, 2011 at 17:22
  • Works well. if your triggering a postback this line alone is all that seems to be needed just before the postback script is executed.$(this).parent().appendTo($("form")); The dialog close command seems to be optional since the form is being reposted.
    – DarrenMB
    Aug 28, 2020 at 14:27
1

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

            } }  });  });
1
  • A lot of people have said this will work but for me it makes it so I can't work with the dialog at all. It puts everything back in the form tag but it's greyed out with all the rest of the "background" of the modal dialog.
    – Matt
    Dec 5, 2013 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.