asp: Button in the jQuery dialog box does not trigger the OnClick event

advertisements

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.


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.