Solved

Html popup window reload issue

Posted on 2013-01-22
3
565 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 33

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

813 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now