Thursday, December 19, 2013

How to run function of parent window when child window closes

Parent Window
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ParentWindow.aspx.cs" Inherits="RunParentJavaScriptFunction.ParentWindow" %>

<!DOCTYPE html>

<html >
<head runat="server">
    <title>Parent Window</title>
    <script>
        function OpenChildAsPopup() {
            var childWindow = window.open("ChildWindow.aspx", "_blank",
            "width=200px,height=350px,left=200,top=100");
            childWindow.focus();
        }

        function ChangeBackgroudColor() {
            var para = document.getElementById('samplePara');
            if (para !="undefied") {
                para.style.backgroundColor = '#6CDBF5';
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p id="samplePara" style="width: 350px; text-align: left;
                  border: 1px solid Red; padding: 10px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Maecenas porttitor congue massa. Fusce posuere,
                magna sed pulvinar ultricies, purus lectus malesuada
                libero, sit amet commodo magna eros quis urna.
                Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            </p>
            <br />
             <asp:Button ID="Button1" Text="Open Child Window" 
             runat="server" OnClientClick="OpenChildAsPopup();"/>
        </div>
    </form>
</body>
</html>


Child Window
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChildWindow.aspx.cs" Inherits="RunParentJavaScriptFunction.ChildWindow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Child Window</title>
    <script>
        window.onunload = function (e) {
            opener.ChangeBackgroudColor();
            //or you can do
            //var para = opener.document.getElementById('samplePara');
            //if (para != "undefied") {
            //    para.style.backgroundColor = '#6CDBF5';
            //}
        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>
                Close this window to fire parent window javascript function

            </p>
        </div>
    </form>
</body>
</html>



Download

No comments:

Post a Comment