Parent page spawn modal window, button on modal windw cause trigger postback on parent?

Question

Hello, I have a asp.net webform. There's a few fields on the form that the user will fill out. There is a hyperlink that opens a modal window (I'm using jquery & prettyphoto, but may switch to http://www.ericmmartin.com/projects/simplemodal/ because his documentation is better)

The modal window contains an iFrame where the user makes a selection and saves a record.

At this point I need to close that window and trigger a postback on the parent page.

Currently I have a hyperlink on the last page where the target = parent and href = the parent page url. Then I have a javascript that autoclicks it. I know it's a cheap hack. It then sends the user back to the parent page, however the pages is reloaded and all the original data is lost. This is the problem.

What's the best way to do this?

thanks!

Answer 1

If the parent window and the child iframe are on the same domain, then this should be fairly simple.

Inside of the iframe, window.parent refers to the outer window object, and in the outer page, it refers to itself.

https://developer.mozilla.org/en/DOM/window.parent

So in the iframe, you can write code along the lines of:

// Check to make sure we're an iframe
if (window.parent !== window) {
  // Run an arbitrary function in the parent window
  var daddy = window.parent;
  daddy.doStuffThatSubmitsAFormInTheParentPage();
}
// Make sure you have that function defined in the parent page.

Here is an example of the access in jsbin. You'll need a console to see the love.

http://jsbin.com/ucisi/5

The related code if you want it pretty

http://jsbin.com/ucisi/5/edit

http://jsbin.com/ucisi/4/edit

Answer 2

With Alex's solution I was able to solve this.

On the parent page, I have:

<script language="JavaScript">
<!--
    function clickPostBackButton() {
        document.getElementById("<%=PostBackButton.ClientID%>").click();
    }
-->
</script>

<asp:Button CssClass="hide" CausesValidation="false" runat="server" Text="Postback" ID="PostBackButton" />

Then on the iFrame that loads in a modal window. I have a form with button. The button takes the user to another page. On this page I have this code:

<script language="javascript" type="text/javascript">
    // Check to make sure we're an iframe
if (window.parent !== window) {
  // Run an arbitrary function in the parent window
  var daddy = window.parent;
  daddy.clickPostBackButton();
}
// Make sure you have that function defined in the parent page.

</script>

At this point the modal widow is closed and the parent page get a postback triggered. It's important to note that my button has CausesValidation="false", without this my page had validation issues. Thanks for your tip Alex Sexton