Links TrafficIn 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