AJAX popup causes screen to re-load using ASP.Net

Question

Using the following code: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

When I click the button to activate the AJAX popup, it does appear, but the page is reloading on the button click.

How do I get around this?

Thanks.

Answer 1

Is your modal wired up to an asp.net button? If so this will be set to postback on click. Perhaps wire the modal to a regular html button instead?

Answer 2

Most likely your button is a post back button. You might want to change that configuration so that it does not automatically post back.

Answer 3

Hard to say without seeing your code, but whatever link/button you are using to launch the dialog, make sure it is returning false from its click event handler (or submit event handler on a form)

Answer 4

Since I'm using an asp.net button control, it wanted to post back, so I created an update panel with the AsyncPostBackTrigger ControlID=[my button id]

So the code to make it all work (with loading the jQuery library is as follows:

<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>


<div id="button">
    <asp:Button ID="Save1" runat="server" Text="Button" onclick="Save1_Click" />
</div>



<asp:UpdatePanel ID="up1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Save1" />
  </Triggers>
  <ContentTemplate>
  </ContentTemplate>
</asp:UpdatePanel>  

    <div id="popupContact">
     <a id="popupContactClose">x</a>
     <h1>Title of our cool popup, yay!</h1>

     <p id="contactArea">
      Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
      <br/><br/>
      We can use it for popup-forms and more... just experiment!
      <br/><br/>
      Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
      <br/><br/>
     </p>
    </div>

    <div id="backgroundPopup"></div>




</div>
</form>