asp:Button in jQuery dialog box not firing OnClick

Question

I have an asp:Button inside a jQuery dialog for which the OnClick event isn't firing. I'm using the PostBackUrl property to navigate to another page, but I want to set this property in the OnClick event so that I can append a query string variable according to the name of a file they upload in the dialog. I posted a question about this dialog earlier, because I couldn't get it to post back at all, but that's been fixed. Clicking the button posts back fine, and I can set the PostBackUrl property in the asp markup, or in the Page_Load() of the code behind. But I can't get the OnClick function to fire for some reason, and that's where I want to set the PostBackUrl. Here's the .aspx...

<form id="frmDialog" runat="server">
        <asp:Button ID="btnDisplayDialog" runat="server" Text="Click to Display Login Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divInnerForm"></div>
        <div class="divDialog" style="display: none">
            <table style="width: 100%;">
                <tr>
                    <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
                    <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        How Old are You?
                        <asp:DropDownList ID="ddlAge" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        How Many Siblings do You Have?
                        <asp:DropDownList ID="ddlNumberSiblings" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        What is your birthday?
                        <input type="text" id="datepicker" name="datepicker" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Please Choose a Picture to Upload:
                        <asp:FileUpload ID="fupUserPicture" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnUserPicture_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...the jQuery script that displays the dialog and places it within the form...

    function showDialog() {
        $('.divDialog').dialog({
            modal: true, show: 'slide', width: 500,
            open: function (event, ui) {
                $('.divInnerForm').append($(this).parent());
            }
        });
    }

...and the code behind with my OnClick function....

 protected void btnUserPicture_Click(object sender, EventArgs e)
        {
            string fileName = "";
            if (fupUserPicture.HasFile)
            {
                try
                {
                    fileName = Path.GetFileName(fupUserPicture.FileName);
                    fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                }
                catch (Exception ex)
                {
                }
                btnSubmit.PostBackUrl = "~/Profile.aspx?pic=" + fileName;
            }
        }

EDIT: Ok, here's how the submit button in the dialog actually renders as HTML. I think this may be the problem. As you can see, the javascript onclick simply provides "Profile.aspx" as the post back url, even though it seems to me any server side code should execute first and foremost. This is within the form...

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">

..and here's how it renderes if I remove btnSubmit.PostBackUrl = "~/Profile.aspx" from the Page_Load() function....

<input id="btnSubmit" type="submit" value="Submit" name="btnSubmit">

EDIT 2: ok so I've added another hidden asp button outside of the dialog, and the button inside the dialog now calls a javascript function which triggers the OnClick event of the hidden button. Same thing, the javascript function runs fine, but btnHidden_Click() function does not run! I'm at a total loss, at this point I literally have no idea why this isn't working. Here's the new Hidden Button, outside of the dialog div but inside of the form as you can see....

 </div>
        <asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable"  OnClick="btnHidden_Click"/>
    </form>

...here's the button inside the dialog with the OnClientClick event, which as I've said runs fine...

                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" />

And here's the OnClick function in the code behind for btnHidden, though it's exactly the same as before...

   protected void btnHidden_Click(object sender, EventArgs e)
        {
            string fileName = "";
            if (fupUserPicture.HasFile)
            {
                try
                {
                    fileName = Path.GetFileName(fupUserPicture.FileName);
                    fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                }
                catch (Exception ex)
                {
                }
                Response.Redirect("~/Profile.aspx?pic=" + fileName);
            }
        }

...and the javascript function that runs, but for some reason doesn't result in btnHidden_Click running...

function forcebtnHiddenClick(e) {
    //__doPostBack('btnHidden', 'OnClick');
    $('#btnHidden').trigger('click');
}

..as you can see I've tried both .trigger('click') and __doPostBack(), both to no avail.

EDIT: Ok, so the problem is definitely the

 function forcebtnHiddenClick() {
            __doPostBack('btnHidden', '');
}

function, which is not actually triggering the btnHidden_Click event. When I make btnHidden visible and click it directly, the btnHidden_Click function runs fine.

EDIT: After TONS of searching, found this and got it to work...

 function forcebtnHiddenClick() {
            <%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %>;
        }

I don't know why

__doPostBack(<%= btnHidden.ClientID %>, '') 

doesn't work.

Answer 1

I use the modal dialog and i need to add a row, otherwise i get the modal transparency over the close button!

var $ObjDialog = $("div[id*='div_MyPopup']");
$ObjDialog.dialog({
    modal: true
});
$ObjDialog.parent().prev().appendTo($("form:first"));
$ObjDialog.parent().appendTo($("form:first"));

Answer 2

You can also make use of a LinkButton instead, the OnClick does cause a postback with this one, no need to adjust any jquery then.

Answer 3

When I use the jQuery dialog, I always use the buttons that come as part of the dialog. Then when they're clicked, I call a javascript function to perform my action.

If I need to handle a PostBack from those buttons, then I create a separate ASP.Net button on the page - this is the button I use to handle my OnClick event. The user won't click this ASP.Net button, though (I hide it with css so it's not visible on the page). Instead, the javascript function I call when they click the dialog button will call code that will mimic a click of my ASP.Net button.

The result is that when the dialog button is clicked, the page will PostBack as though the ASP.Net button was clicked, and I can handle it via my OnClick event.

Here's some sample code (in VB.Net)...

    Dim csm As ClientScriptManager = Page.ClientScript
    Dim js As New StringBuilder
    js.AppendLine("function handleSubmitMyButton() {")
    js.AppendLine(csm.GetPostBackEventReference(MyButton, ""))
    js.AppendLine("}")
    csm.RegisterClientScriptBlock(Me.Page.GetType, "create_call_to_MyButton", js.ToString, True)

When the page is built, it will include the handleSubmitMyButton() javascript function. The dialog button click will call this function, which will trigger the PostBack as though the 'MyButton' button was clicked.

Usually I don't have to hide the ASP.Net button with css. It's often the button that gets clicked to open the dialog. I prevent the PostBack when it opens the dialog; then when the dialog button is clicked, I mimic the click of that button.

UPDATE: I saw several people mention the following line of code

$(this).parent().appendTo(jQuery("form:first"));

I thought that's what you were attempting to do with your line of code:

$('.divInnerForm').append($(this).parent());

If that doesn't do the same thing, though, you would need to have the code to add your fields to the form.

Answer 4

Try this

function showDialog() {
    $('.divDialog').dialog({
        modal: true, show: 'slide', width: 500
    });
   $(".divDialog").parent().appendTo($("form:first"));
}

You should be appending divDialog to the form not that empty divInnerForm.Then your button will be in the form and its on click event will fire happily.

Update

Try also using onclient click.Then wire this attribute to a function which will force a post back on the hidden button.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forceClick();" />
<asp Button id="hidButton" runat="server" onclick="hidButton_Click" />

function forceClick(){

__doPostBack('<%#hidButton.UniqueId %>');
}

Then use the event handler hidButton_Click to put your code.

Answer 5

$(this).parent().appendTo('form') 

should work fine.. Append it to the form to fire server side events