How do you modify a modal popup from ASP codebehind instead of letting it close?

Question

I'm using SimpleModal to create a popup on an ASP.net application. The OK button calls a server-side function - and based on the resulta of that function I'd like to modify the popup (make some things visible, etc.) instead of letting it close. If that's too difficult, I'd like to open the popup again without the user having to re-click on anything. I'm just not sure what the best way to do this is.

Currently the OK button in the popup looks like this:

<asp:ImageButton ID="submitInfoBtn" OnClick="btnSubmitInfo_Click"
           ImageUrl="css/assets/btn_ok.png" runat="server"/>  

and there is nothing defined that tells anything that the OK button should close the popup (the Cancel button has class="simplemodal-close", so I would expect it to do just that, but not the OK button) - anyone have any ideas on the best way through this? Thanks in advance!!

Answer 1

You need to set the Javascript handler for the button with return false. See... http://stackoverflow.com/questions/683746/how-to-disable-postback-on-an-asp-button

Notice the return false. This will prevent a Postback.

Now you can get any server data that you need using Ajax in your Javascript button handler and use JQuery to modify your Popup.

By the way, you can also use JQuery UI Dialog for modal popups. You may have much more support using that.

Answer 2

It's not so difficult, see my code of the pop up window. There is an OK button in the pop up, sometimes clicking OK will modify the pop up window, sometimes clicking will close the window, do I have a misunderstanding?

void OK_click(object sender, EventArgs e)
{
   try
   {
      if (DataIsValid())
      {
        Save();
        this.Page.ClientScript.RegisterStartupScript(typeof(Page), "closeWindow", "<script type='text/javascript'>self.opener=null; self.close();</script>");
      }
      else ErrorLabel.Visible = true;
   }
   catch { ErrorLabel.Visible = true; }

}

Answer 3

You'll want to use the SimpleModal onShow callback to bind to the OK button, make the ajax request, then check the response and show the new content.

You shouldn't use the onClose callback because it's just for animating the close or any cleanup. You can programatically close the dialog when you are ready with $.modal.close();

It will involve checking the dimensions of the returned content and adjusting the modal dimensions accordingly.

Have a look at the flickr badge viewer demo (http://www.ericmmartin.com/projects/simplemodal-demos/) for an example of what I'm talking about.