Retrieve list of items from parent window using JQuery

In this example, we will show how to retrieve a list of items rendered using div elements on a opened window.

Here is the list to retrieve :

<div id="itemlist">
    <div class="onerow">
        <div class="onecell">Element 1</div>
        <div class="onecell">Item 1</div>
        <div class="onecell">101</div>
    <div class="onerow">
        <div class="onecell">Element 2</div>
        <div class="onecell">Item 2</div>
        <div class="onecell">102</div>

<!-- the button to open new window -->
<input type="button" href="clic_event_child.html" value="click me" id="clickme" />

You may check the demo page by clicking the following link :

Onclick event – Parent elements

Here is the javascript code handling the click event on the button :

<script type="text/javascript" language="javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">


// button click me
$("#clickme").on("click",function (event) {
    newwindow =$(this).attr('href'),'','height=400,width=500');
    if (window.focus) {

// ecnd click me


From the child window, we simply copy what is inside the parent div element using the ID.
Another div element is used to place all the data :

<title>JQuery - Clic event and parent window retrieving elements</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link href="div_table.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" language="javascript" src="jquery-2.1.1.js"></script>

<script type="text/javascript">


    $("#thedata").html( window.opener.$("#itemlist")); 


<h3>The data from the Parent window</h3>

<div id="thedata"></div>



For rendering correctly the div elements as a table, we use a few lines of CSS :

div#itemlist {
    border-collapse : collapse; 
    display : table;
    border  : 1px solid lightgray;
    margin  : 1em;

div.onerow {

    display : table-row;
    border-bottom  : 1px dotted black;

div.onecell {

    display : table-cell;
    padding : 1em;

As you have noticed, it’s not a big deal to handle this type of request, use the window.opener property and you treat all elements as usual with Jquery.

We will also add an example of a similar request using Php to retrieve the elements, we will need to use Ajax to achieve this properly.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: