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>
    <div class="onerow">
        <div class="onecell">Element 2</div>
        <div class="onecell">Item 2</div>
        <div class="onecell">102</div>
    </div>

</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">

$(document).ready(function(){

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

});	
// ecnd click me

});
</script>	

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 :

<!DOCTYPE HTML>
<html>
<head>
<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">

$(document).ready(function(){


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


});
</script>		
</head>
<body>

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

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

</body>

</html>

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

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: