This code is very useful to transfer data from parent page to child page using popup modal dialog. Also this code return values from child to parent.
Parent HTML:-
Parent HTML:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function UpdateFields(newFore, newSur) {
var forename = document.getElementById("forename");
var surname = document.getElementById("surname");
forename.value = newFore;
surname.value = newSur;
}
function ShowModal() {
var forename = document.getElementById("forename");
var surname = document.getElementById("surname");
var
sharedObject = {};
sharedObject.forename = forename.value;
sharedObject.surname = surname.value;
if (window.showModalDialog) {
var retValue = showModalDialog("childpage.htm", sharedObject, "dialogWidth:200px; dialogHeight:200px;
dialogLeft:300px;");
if (retValue) {
UpdateFields(retValue.forename, retValue.surname);
}
}
else {
// similar functionality in Opera, but its
not modal!
var modal = window.open("childpage.htm", null,
"width=200,height=200,left=300,modal=yes,alwaysRaised=yes",
null);
modal.dialogArguments = sharedObject;
}
}
</script>
</head>
<body>
Forename:
<input type="text" id="forename"
value="Alan"/><br />
Surname: <input type="text" id="surname"
value="Smith"/>
<br /><br />
<button onclick="ShowModal()">Edit
fields with a modal dialog!</button>
</body>
</html>
Child HTML:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
/>
<title>Modal dialog sample</title>
<script type="text/javascript">
function Init() {
var sharedObject = window.dialogArguments;
var forename = document.getElementById("forename");
var surname = document.getElementById("surname");
forename.value = sharedObject.forename;
surname.value = sharedObject.surname;
}
function OnOK() {
var forename = document.getElementById("forename");
var surname = document.getElementById("surname");
if (window.showModalDialog) {
var sharedObject = {};
sharedObject.forename = forename.value;
sharedObject.surname = surname.value;
window.returnValue = sharedObject;
}
else {
// if not modal, we cannot use the
returnValue property, we need to update the opener window
window.opener.UpdateFields(forename.value,
surname.value);
}
window.close();
}
function OnCancel() {
window.close();
}
</script>
<body onload="Init ();">
Forename:
<input type="text" id="forename"/><br/>
Surname: <input type="text" id="surname"/>
<br/><br/>
<button onclick="OnOK()">OK</button> <button onclick="OnCancel()">Cancel</button>
</body>
</html>
No comments:
Post a Comment