Solved

Html popup window reload issue

Posted on 2013-01-22
3
568 Views
Last Modified: 2013-01-23
Hi Experts,
 
Please help the issue below. Thanks!

I have a html popup window which is opened from a main html page.
Data will be passed from main page to popup for it to render.

in main page:
var dataRetrievedFromServer = "Data retrieved from Server";
popupWindow = window.open("popupPage.html", "New window name");
popupWindow.dataRetrievedFromServer = dataRetrievedFromServer;

in popupPage.html

alert(dataRetrievedFromServer);

popupPage.html works for the first time when it is called from main page.
The problem is that I can not "refresh" popupPage.html after loaded. (e.g. F5).
Since the popupPage.html need data "dataRetrievedFromServer" to render the page,
so I try to use localStorage or sessionStorage to save the data passed from main page at the initial loading.
(code below). It works for the else statement. not the if route.
            if (dataRetrievedFromServer == null || dataRetrievedFromServer == "undefined"){            
                  dataRetrievedFromServer = localStorage.dataRetrievedFromServer;
                  alert("dataRetrievedFromServer is null  or undefined");
            }
            else{
                  localStorage.dataRetrievedFromServer = dataRetrievedFromServer;      
                  alert("dataRetrievedFromServer is populated.");
            }

a short history about it. The popup page used to be written in jsp, which the data can be retrieved from session. Reload the popup page is not a problem. I need convert the pupup page into html page. Then the issue comes up.
0
Comment
Question by:SarahDeng
3 Comments
 
LVL 34

Accepted Solution

by:
Slick812 earned 300 total points
ID: 38810895
greetings  SarahDeng, , , from your description of problem, you may be getting your "pop-up" page var dataRetrievedFromServer in the wrong direction, you set it when you create the pop-up, what I would do is NOT set it in another window (page) javascript , but get it in the pop-up page javascript, from the main (first) window, , , this is some suggested code, I can not test it now , but may work-

var dataRetrievedFromServer = "Data retrieved from Server";
window.name = 'main1'; // make sure the ajax window has a name property
popupWindow = window.open("popupPage.html", "pop1");
//pop1.dataRetrievedFromServer = dataRetrievedFromServer; do not set here

Open in new window


and on pop-up page javascript -
// setting local dataRetrievedFromServer need to happen in the onload event
var dataRetrievedFromServer = main1.dataRetrievedFromServer;
alert(dataRetrievedFromServer); // to prevent confusing variable names in main and pop-up, use different suffix in each

Open in new window


although, what I might actually do since these are separate windows is to have the AJAX get the server data in the javascript on the pop-up page

also since many browsers now block those pesky pop-up windows, the old  window.open( )  methods have now gone to a "Cover" type of <div> display in the main window?
0
 
LVL 51

Assisted Solution

by:ahoffmann
ahoffmann earned 200 total points
ID: 38811455
I'm also wondering that your script works as described, I guess that you're just lucky to see anything from your dataRetrievedFromServer

the problem is the sequence

> popupWindow = window.open("popupPage.html", "New window name");
> popupWindow.dataRetrievedFromServer = dataRetrievedFromServer;

which sets the data for your popup window after it is created
hence it will only work if rendering pupupPage.html is not yet finished when popupWindow.dataRetrievedFromServer is set

I suggest that you use a function inside popupPage.html which loads (and renders) data from popupWindow.dataRetrievedFromServer
this function must be called with a delay, for example with setTimeout()
then you can also call that function again to refresh the page
0
 

Author Comment

by:SarahDeng
ID: 38812488
Thanks for all answers. I think I will make a separate Ajax call from popup Page to retrieve data. It will make refresh work.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question