Question

84

Changing popup content

rated 0 times [ 91] [ 7] / answers: 1 / hits: 18397 / 13 Years ago, tue, september 13, 2011, 12:00:00

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;



  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

georginaariao

Add To Favorites

Follow

Total Points: 626

Total Questions: 112

Total Answers: 112

Location: Burkina Faso

Member since Thu, Dec 15, 2022

1 Year ago

answered 13 Years ago myakylas · Accepted Answer

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>