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><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 usingwindow.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;
})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);
}
}How load() is used to get data from backend script.
This article is written by plus2net.com team.
| Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |
JQuery Video Tutorials