Parent & Child window using JQuery

Opening & Closing Child window from Parent

We can open and close child window from a parent window and control data flow between them. We can execute functions of parent window from the child window.

Here is the simple code to open & close child window
<script>
$(document).ready(function() {
//////////////var newWin; // declaring global variable 
////////////////////////////
$("#b_open").click(function(){
newWin = window.open("window-child-open-close.php");
})
//////////////
$("#b_close").click(function(){
newWin.close(); 
})
///////
})
</script>
Child window
<script>
$(document).ready(function() {
//////////////
$("#b2").click(function(){
self.close(); 
})
///////
})
</script>

Reading value of elements of Parent window at Childe window and vise versa

We can enter data at Parent window and same data will be passed to child window once it is opened. Similarly data from child window will be available at Parent window once child window is closed. We will be using window.opener to access data from parent.
At child window
<script>
$(document).ready(function() {
////////////////
var str=parent.window.opener.$('#t1').val()	
$('#d1').html("Parent Window Data = " + str);
//////////////
$("#b2").click(function(){
var sel=$('#t2').val();	
window.opener.$('#t1').val(sel);	
self.close(); 
})
///////
})
</script>

Reload Parent window from Child

Close child window and reload parent window OR only reload parent window from child.

Reload part of the parent window from child

Sometime we will be refreshing part of the display area of parent window without reloading the full page. Such requirement comes when we update a database record at child window and wants to reflect the same at parent window.

We can execute a function in parent window matching with the closing of child window.

While closing the child window we will use onunload event to trigger a function which loads part of the page with fresh data from backend PHP file.
$("#b_open").click(function(){
newWin = window.open("window-child-reload.php");
newWin.onunload = my_load;
})
In our script we have used my_load() function to reload part of the page. Inside this function we increment the value of a text box showing number of times data is refreshed.
function my_load(){
if(newWin.location != "about:blank"){ // Don't do any thing if child window is open
var str=$('#t1').val();
str=parseInt(str)+1;
$("#t1").attr('value',str);	
}
}
You can use load() to get fresh data from backend script inside above function.
How load() is used to get data from backend script.
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer