Causing a PostBack to a different page from a PopUp

Question

I have a main page and a details page.

The details page is a javascript popup invoked from the main page.

When the 'save' button is clicked on the details page, I want the main page to 'refresh.'

Is there a method of invoking a postback to the main page while also maintaining the save postback from the details page?

Edit - Using window.opener.location.reload(true) does work, but it prompts the user to resend information. This 'document.location.href = document.location.href;' does not work either because it clears the form on the main page.

Answer 1

Yes, you should be able to do target="_parent" on the link from your details page. You'll have to bind an event onto that to close the details page though but should get you started.

eg: <a href="mainPage.html" target="_parent">Save Details</a>

Answer 2

You can access the parent window from the popup using some javascript with window.opener. From there you can use, for example, location.href to refresh the parent page. :)

Answer 3

I would recommend using a modal popup for the details page instead of opening another window through javascript. This will allow you to save everything on the same page and will give you more control

Considering your current situation I think you are going in the right direction. Try this out and see if it fits your needs.

window.opener.location.href='http://redirect.address';

Here is a similar question

Answer 4

I know you said you needed to do a postback, but I'll offer up this suggestion...

I would place an ajax updatepanel on the main page, and then allow the detail popups to update that. I'm not sure how much of a liking to microsoft ajax and the ajax control kit you have, but that would be my first approach.

Obviously I don't know the full scope, but I don't see the problem of the page asking for the user to resubmit the data going away and the page updating without some sort of JavaScript based solution.

Answer 5

For an updatepanel-free solution, you can have the popup return a value to a text field, and make that text field postback on change.

Answer 6

If you need to refresh the page and keep the form data without resubmitting the POST, you may be able (depending of the size and complexity of your form data) to build a representation of the form state in JavaScript, store it in a cookie or the querystring, refresh the page by setting document.location.href, and then reload the data when the window loads.

Below is a rough version of this idea. This code along, with an onload wire-up, would go in the opener (the cookie handling methods would also need added). window.opener.refreshWithState() would be called from the popup.

(this version depends on inputs having unique IDs)

(function() {
  window.refreshWithState = function() {
    setCookie("state", buildState());
    document.location.href = document.location.href;
  };

  function handleWindowLoad() {
    var state = readCookie("state");
    if (state) {
      restoreState(state);
      eraseCookie("state");
    }
  }

  function buildState() {
    var i, elem, elems, key, val, stateParts = [];

    elems = document.getElementsByTagName('INPUT');
    for (i = 0; elem = elems[i]; i++) {
      switch (elem.type) {
        case "checkbox":
        case "radio":
          val = elem.checked ? 1 : "";
          break;
        case "text":
        case "hidden":
        case "file":
          val = escape(elem.value);
          break;
        default:
          continue;
      }
      stateParts.push('"' + escape(elem.id) + '":"' + val + '"');
    }

    elems = document.getElementsByTagName('SELECT');
    for (i = 0; elem = elems[i]; i++) {
      stateParts.push('"' + escape(elem.id) + '":"' + elem.selectedIndex + '"');
    }

    return '{' + stateParts.join(',') + '}';
  }

  function restoreState(state) {
    var key, elem, val;
    var stateObj = eval('(' + state + ')');

    for (key in stateObj) {
      elem = document.getElementById(unescape(key));
      if (!elem) {
        continue;
      }
      val = stateObj[key];
      if (elem.tagName == "SELECT") {
        elem.selectedIndex = val;
      }
      else if (elem.tagName == "INPUT") {
        switch (elem.type) {
          case "checkbox":
          case "radio":
            elem.checked = !!val;
            break;
          case "text":
          case "hidden":
          case "file":
            elem.value = unescape(val);
        }
      }
    }
  }
})();