Changing popup content

Question

I'm opening a popup using popup = window.open(....) and then trying to insert some html into a div in the popup.

popup.document.getElementById('div-content').innerHTML = "hello world"; doesn't do anything however, popup.document.getElementById('the-field').value = "Hello There"; changes the content of a field with an id="the-field".

Any idea why one is working but not the other? How can i replace the content of the div?

hope you can help.

EDIT: the popup

<!DOCTYPE html>
<html>
   <head>
        <title>Report</title>
        <meta charset="utf-8">
   </head>

    <body>
        <header>

        </header>

        <div id="div-content"></div>

        <div id="report-container">
            <input type="text" id="the-field" name="the_field"/>
        </div>

        <footer>
        </footer>

     </body>

 </html>

the code

  function reportComplete(report_content)
  {
  var popup;
  var template_path;

  template_path = base_url + "application/views/secure/reports_preview.php";
  popup = window.open(template_path, "Report", "scrollbars=yes ,resizable=yes");

  popup.document.getElementById('the-field').value = "Hello There"; // this works

  popup.document.getElementById('div-content').innerHTML = "hello world";

  }

Could you post the code in the host page and the popup? – Chris Pietschmann Sep 13 '11 at 03:26 — Chris Pietschmann, Sep 13 '11 at 03:26

score 5 · Answer 1 · answered Jan 30 '12 at 15:40

...or simply:

<script type="text/javascript">    
function reportComplete(report_content)
{
    var popup;
    var template_path;

    template_path = base_url + "application/views/secure/reports_preview.php";
    popup = window.open(template_path, "Report", "scrollbars=yes,resizable=yes");

    popup.window.onload = function() {
        popup.document.getElementById('the-field').value = "Hello There";
        popup.document.getElementById('div-content').innerHTML = "hello world";
    }
}
</script>

nfang · Accepted Answer · 2011-09-14T01:21:44.147

I think the problem here is that the document in the popup windows hasn't finished loading when you try to access a part of it. On my machine, neither of the divs can be accessed with the provided code.

If the content you want to insert is fixed, then just do all these changes on the popup page itself so that you can make it happen only when the document is completely loaded. If you need to send some dynamic contents, the easiest approach may be using query strings.

UPDATE: There is a way to fire up DOM manipulation function only when the popup finishes loading. First, you need a callback function on the main window, and put all the DOM manipulation code there:

window.callback = function(doc) {
    doc.getElementById('the-field').value = "Hello there";
    doc.getElementById('div-content').innerHTML = "Hello world";
}

Then, simply bind a function call to the body onload event on the popup window:

<script type="text/javascript">
    function loaded() {
       window.opener.callback(document);
    }
</script>
<body onload="loaded();"><!-- body content --></body>

you are right! it is a timing problem. if i set a breakpoint on `popup.document.getElementById('the-field').value = "Hello There";` then BOTH calls succeed. the div and the field are updatable. The question is now how can I tell when the popup is ready to be manipulated? — djeetee, Sep 13 '11 at 13:41

Changing popup content

2 Answers2

Linked