How To Refresh Greybox Parent Page

I wonder why its hard to find this tutorial on the web. So I decided to make my own. This snippet is useful if you’re editing data in the greybox pop up window and then you want to reflect the changes in its parent window by refreshing it.

In case you want to test this code instantly, you may download the code or see the result of this tutorial live:

DOWNLOAD SOURCE CODE LIVE DEMO

Step 1: Download Greybox here and place it inside you js/ directory.

Step 2: Create your index.php file, with these codes inside:

<html>
     <head>
          <title>How To Refresh Greybox Parent Page</title>
 
          <script type="text/javascript">
               var GB_ROOT_DIR = "js/greybox/";
          </script>
           
          <script src="js/greybox/AJS.js" type="text/javascript">
          </script>
          <script src="js/greybox/AJS_fx.js" type="text/javascript">
          </script>
          <script src="js/greybox/gb_scripts.js" type="text/javascript">
          </script>
          <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">       
 
          <script language="javascript" type="text/javascript">
               // we will use greybox' afterclose function to reload the parent page
               // after closing the grebox pop up window
             <!--
                    function afterclose() {
                         window.location.reload();
                    }        
               // -->
          </script>
 
     </head>
<body>
 
     <b>This is the greybox parent window</b>
     <p>
          <a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
               Click this link to greybox pop up
          </a>
     </p>
 
     Textbox with default input: 
     <input name="sample_textbox" size="40" type="text" value="some predefined value" />
 
</body>
</html>

Step 3: Create your greybox pop up page which is greybox_pop_up.php with these codes inside:

<html>
     <head>
          <title>This is the greybox pop up</title>
          <script type='text/javascript'>
          function redirect_to_parent(){
               parent.parent.window.location = "index.php";
               parent.parent.GB_hide();
          }
          </script>
     </head>
<body onunload="redirect_to_parent();"> <-- The important part -->
 
 
     <h2>This is the greybox pop up window</h2>
     <form>
          <input type="button" value="Close This Window" onclick="parent.parent.GB_hide();"> 
     </form>
 
 
</body>
</html>

Step 4: You should have this files by now:

How To Refresh Greybox Parent Page
Final files in this tutorial

Step 5: Testing

  • If you’re gonna run index.php, you should see this in your browser:
Our index.php file
Our index.php file
  • Change the predefined textbox value to any values you want, like the following:
Textbox with changed predefined value
Textbox with changed predefined value
  • Click the link to show the greybox pop up
Greybox pop up window
Greybox pop up window
  • Close the pop up window, if the textbox value returned to “some predefined value”, it means that the parent page was refreshed.

By the way, if you’re not yet familiar with greybox, I also have a tutorial on how to use greybox. That’s it! Hope it helps :)

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.