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