asp button event inside foundation modal not firin

Question

I have tried searching for a solution for this, but nothing seems to be working for me. My problem is pretty straightforward though (so, I think).

I am using foundation with asp webforms and have a reveal modal window that fires when the page is loaded.

Code:

$(document).ready(function () { $('#myModal').foundation('reveal', 'open') });

The above works fine, however, any time I put an ASP button inside the modal (the one I am using, btnReset, redirects to a new page), clicking on it will not fire the event attached to it.

Code:

<div id="reset">
    <div class="large-2 columns">
        <asp:Button ID="btnReset" runat="server" Text="Reset" 
                    OnClick="btnReset_Click" OnClientClick="btnReset_Click"   
                    CssClass="button small radius alert" />
    </div>
</div>

Code for btnReset:

protected void btnReset_Click(object sender, EventArgs e)
{
     HttpCookie cookie = Request.Cookies["userInfo"];
     cookie.Expires = DateTime.Now.AddDays(-1);
     Response.Cookies.Add(cookie);
     Response.Redirect("LogIn.aspx");
     //Server.Transfer("LogIn.aspx");
}

I'm sure I am missing some here, but I'm just stumped on what I am doing wrong. How can I get an ASP button and have it fire it's event when it is inside a modal?

Answer 1

I know this was asked a month ago, but I ran into the same problem and found this question with no solution. I have found the solution over at the Foundation forums and thought I would answer it here for future reference.

This issue is with how foundation adds your modal. When you look in your dev tools you will see that the modal, when called, is outside the form making the asp buttons unable to access the code behind.

This means we need to append the the modal to the form so that the buttons will access the code behind.

I tried several different ways to achieve this in the javascript using appendTo, but found the easiest method was the make foundation use the root element form.

$(document).foundation('reveal', { rootElement: 'form' });

I found that here: Elena Zhdanova solution