ASP.Net Submit Button Not Executing Inside jQueryUI Dialog-Content Loaded From Another Page

Question

I am trying to add a few functions to a ASP.NET page using jQuery UI's dialog. I am attempting to display 3 separate dialogs which allow a user to add or edit a contact's address, phone, or email information.

I have a UserView page which contains the jQuery, a GridView, and the DIVs I load the controls into. I am using jQuery's .load(url + '#DIV', function... capability to load the 3 boxes from a second page called UserFunctions.

The boxes all load and are populated correctly with data, however, the save button does not submit the changes skipping the button's click command. Is there a way to do this? Can I manually call postback from the jQuery dialog? I would like to stay away from IFrames if at all possible.

UserView jQuery Code

        $('#addPhone').load('/Administration/UserFunctions.aspx?Mode=edit&Record=1' + ' #PhoneAdd', function () {
            $(this).dialog({
                modal: true,
                autoOpen: false,
                draggable: true,
                width: 600,
                open: function (type, data) {
                    $(this).parent().appendTo("form:first");
                },
                buttons: {
                    "Close": function () { $(this).dialog("close");  }
                }
            });
        });

UserView and Show Dialog Button

<a href="#" id="A1" onclick="javascript:showDialog('addPhone');">Add Phone</a><br /><br />
        <div id="addPhone">
        </div>

UserFunction DIV that is loaded

<div id="PhoneAdd">
    <p><span class="Type">Phone Type
        <asp:DropDownList ID="ddPhoneType" runat="server" Width="205px" 
            DataSourceID="odsPhoneType" DataTextField="PhoneName" 
            DataValueField="PhoneTypeID">
        </asp:DropDownList>
        <asp:ObjectDataSource ID="odsPhoneType">
        </asp:ObjectDataSource>
    </span></p>
    <p><span class="Number">Number
        <asp:TextBox ID="ttPhoneNumber" runat="server" Width="100" ></asp:TextBox></span>
        <span class="Extension">Extension
        <asp:TextBox ID="ttPhoneExtension" runat="server" Width="50" ></asp:TextBox></span></p>
    <p><span class="PhoneSubmit"><asp:Button ID="btnPhoneSubmit" runat="server" 
            Text="Save" onclick="btnPhoneSubmit_Click" />
    </span></p></div>

UserFunction Button Click Event (which does not fire)

    protected void btnPhoneSubmit_Click(object sender, EventArgs e)
    {
        if (qString == "insert")
        { //insert to database. Code removed to save room. }

        if (qString == "edit")
        { //update database}
    }

The Code Behind above never runs (tested by attempted to debug the if statement). Thank you in advance for your help. I appreciate it very much.

score 0 · Accepted Answer · answered Apr 11 '11 at 05:01

The problem here is, since you modal box are ajax requests they are not posting back to their respective pages but instead posting back to the parent page (UserView).

You could possibly handle this by putting a form in your modal and have it post to another page and handle the form inputs there.

<form action="/User/PostPhone.aspx" method="post">
    //form elements in here
</form>

Then your PostPhone.aspx code behind will have do something like:

if (IsPostBack)
{
    var phoneNumber = Request["phonenumber"];
    //save phone number
}

ASP.Net Submit Button Not Executing Inside jQueryUI Dialog-Content Loaded From Another Page

1 Answers1