CodingForums.com - How to refresh a webpage using a event from another page?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - How to refresh a webpage using a event from another page? (http://www.codingforums.com/showthread.php?t=241647)

How to refresh a webpage using a event from another page?

Hello. It is Friday. I thought this will be a simple question, but it seen like hard to find a fast and simple solution. I am working on an online sign in tool. Two browser windows are open at the same time. One is for people to sign in with password and submit their information; another one is for Administrator to see who sign in. I am trying to refresh the Administrator page whenever user finished sign in and submitted their information. These two pages cannot be parent and child page. What will be the easiest way to solve this in ColdFusion or JavaScript? Thank you so much for your time. Have a wonderful weekend.:thumbsup:

If you can't have a parent child relationship then you need to form some kind of relationship. The simplest solution that I can think of would be with JavaScript cookies. If both pages have a loop that listens to a cookie value and both pages can write to the cookie, then communication between the two page can be facilitated through the cookie. If the sign in page tells the cookie that it is time for the admin page to refresh, then when the admin page gets that info- it can update itself. That is assuming you want to refresh... if the two pages can communicate so easily, you could just send the information you need to display on the admin page through the cookie.
Your example suggests that the pages might be running on different computers though, is that the case? If so I would recommend a similar solution using ajax to pass the information to the server.

Quote:

Originally Posted by eddyzhuo (Post 1150064)

If you want to transfer data between two different pages that are not "connected" in any way and see the results live, how about this:

Write a tiny Javascript loop that sends the data you want to see into your machine's localStorage (say, at 1 second intervals). Then have another loop running in the admin page reading and displaying the localStorage data, also looping once a second.

It would go like this:

[client login] --> localStorage.setItem

[admin viewer] <-- localStorage.getItem

Haven't tried it, but it should work???

Edit:
Just tried it...... it works!

Thank you so much for the quick response. Can someone help me with coding to create some kind of listening method, or can I just simply send a request from the [client log] to [Admin Viewer]? I know the difficult part is these two pages might be running on different computers? But I will start to try both of your suggestions. Thank you again.

If the pages are running on different computers, then you can *NOT* solve this with JavaScript alone.

You *must* have some server-side code (PHP, ASP, JSP, etc.) that receives a message (presumably via AJAX) from one client to store the changed information. Then the Admin page can "scan" (again, using AJAX, and making the request every few seconds) by asking the server what has changed.

If there is a possibility that they might run on different computers then you need a serverside solution.
It looks like you know ColdFusion and JavaScript both, so using js to write an AJAX loop and coding for the server in ColdFusion is my recommendation, problem is I don't know ColdFusion... You should post that query in the appropriate forum :D
As for the server listener, I've been playing around with dynamic script injection for something very similar... I came up with the following to get a simple update from the server to tell the page it needs to refresh, its not AJAX, but I need it to run on a local machine, so this gets around the cross domain scripting issues:

Code:

<script id="loadarea" type="text/javascript"></script>

<script type="text/javascript">

 window.setInterval("document.getElementById('loadarea').src = 'http://www.mysite.com/update.js?nocash=' + Math.random()*500;",60000);

</script>

I just don't know how practical it is (or how unsecure it might be), or if it would do you any good... The serverside script loads all the necessary updates to the update.js file in javascript, like any other include... also you should check the values you get back from the server and only do something if they are in fact new

Blaze: But how do you ensure that the JavaScript that you loaded with your trick then actually gets run? Call a function in that code that you know must exist?

One problem with this is that the loading (assignment to the src) will be *synchronous*. So if there is any hangup in getting the response from the server, the HTML page will be "dead"...no other JS code can run, events, can't happen, etc.

That's why people prefer using AJAX. The first A there means "Asynchronous". So while the loading from the server is taking place, all other code on the page is accessible. The completion of the load triggers the onreadystatechange event. If the load hangs, the page keeps running.

A variation on your trick might be this:

Code:

<iframe style="display: none;" id="loadarea"></iframe>

<script type="text/javascript">

 window.setInterval("document.getElementById('loadarea').src = 'http://www.mysite.com/update.js?nocash=' + Math.random()*500;",60000);

</script>

*NOW* the load *IS* asynchronous, by definition. And the code in the iframe can automatically start running itself, rather than waiting for a call from the parent. And, of course, the code in the iframe can refer to anything in the parent via parent.someFunction() or similar.

Quote:

Originally Posted by Old Pedant (Post 1150086)

Um..... the OP said:

Quote:

Two browser windows are open at the same time.

To me that sounds like two windows, two different web pages, same computer.

Krupski: Read post #4, from the OP.

Quote:

I know the difficult part is these two pages might be running on different computers?

Quote:

Originally Posted by Old Pedant (Post 1150091)

One problem with this is that the loading (assignment to the src) will be *synchronous*.

As I test I put a little loop into my message board code that took the contents of a changing element and stored the innerHTML of it into a localStorage object named "test".

Then I had another tiny program (same browser, same computer, different "website") reading that same object and writing it's content to the innerHTML of an empty DIV.

Both "server" and "client" were running inside a setInterval loop of 1000 msec.

I was able to watch the div on the message board "live" with the other window (albeit with a short delay).

Of course, this won't work on different MACHINES, but to watch what's going on in one WINDOW inside another WINDOW, it works fine and as I understand it, that's what the OP wanted....

Quote:

Originally Posted by Old Pedant (Post 1150098)

Krupski: Read post #4, from the OP.

Post #4 came after my post #3. I didn't know at the time........

Quote:

Originally Posted by Krupski (Post 1150102)

Post #4 came after my post #3. I didn't know at the time........

Yes, but before your post #8, which is what I was replying to.

The full code would have been
index.hta

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head>

<HTA:APPLICATION ID="Test"  APPLICATIONNAME="Test"   BORDERSTYLE="normal"  CAPTION="yes"  



CONTEXTMENU="no"  ICON="test.ico"  INNERBORDER="no"  MAXIMIZEBUTTON="no"  MINIMIZEBUTTON="yes"  NAVIGABLE="yes"  SCROLL="no" 



 SCROLLFLAT="no"  SELECTION="no"  SHOWINTASKBAR="yes"  SINGLEINSTANCE="yes"  SYSMENU="yes"  VERSION="1.0"  WINDOWSTATE="" />



 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/> 

 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 <META HTTP-EQUIV="Expires" CONTENT="-1">

 

 <title>Test</title> 

 

 <STYLE> 

  <!--

  --> 

 </STYLE> 

</head>

<br />

<br />

<input id="myInfo" />

<button id="SetUpdate">Send Update to server</button>

<br />

<br />

<button id="GetUpdate">Retrieve Update from server</button>

<br />

<br />

<a href="index.hta">View Report</a>

<div id="iFrameContainer"></div>

<div id="viewer"></div>



</body> 



<script type="text/javascript">

 NewInfo = !1;

</script>



   <script id="loadarea" type="text/javascript"></script>



<script type="text/javascript">



 function ID(e){return document.getElementById(e);}

 

 ID('SetUpdate').onclick = function(){

  args = 'Arr=' + ID('myInfo').value;        //Hello World';

  ID('myInfo').value = '';

  ID('iFrameContainer').innerHTML='<iframe style="width:0px; height:0px; border: 0px" src="http://www.mysite.com/ess/lib/testing/submit.asp?'+args+'"></iframe>';

  }



 ID('GetUpdate').onclick = function(){

  ID('loadarea').src= 'http://mysite.com/ess/lib/testing/test.js?nocash=' + Math.random()*500;



  if(NewInfo){

   if(NewInfo!=='0')

   ID('iFrameContainer').innerHTML='<iframe style="width:0px; height:0px; border: 0px" src="http://www.mysite.com/ess/lib/testing/submit.asp?Arr=0"></iframe>';

   }



  window.setTimeout(function(){

   ID('viewer').innerHTML = NewInfo;

   ID('viewer').innerHTML += '<br />'+ID('loadarea').src;

   ID('loadarea').src= 'http://mysite.com/ess/lib/testing/test.js?nocash=' + Math.random()*500;

   },500);

  }



  ID('loadarea').src= 'http://mysite.com/ess/lib/testing/test.js?nocash=' + Math.random()*500;



</script>

 

<HEAD>

 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 <META HTTP-EQUIV="Expires" CONTENT="-1">

 </HEAD>

 

</html>

submit.asp

Code:

<%@LANGUAGE="JavaScript"%>

<%



 FromClient = new String(Request('Arr')).replace(/[^\s\.\,0-9a-zA-Z]/g,'');



 fso = Server.CreateObject("Scripting.FileSystemObject");



 myPath = Server.MapPath("test.js");

 if(!fso.FileExists(myPath))

  myfile = fso.CreateTextFile(myPath, true);

 else myfile = fso.OpenTextFile(myPath , 2);

 

 myfile.WriteLine('NewInfo = "' + FromClient + '";');

 

 myfile.Close();



%>

This is the example that I was testing last week, it works so far...
I *did* say that I definitely recommend AJAX, but the OP asked for a sample of how to set a loop to check the server... this isn't the AJAX forum, and I never claimed my loop was asynchronous...
@Old Pedant The problem that I had with your solution (which I definitely tried first!) is that it also runs into cross domain blocking mechanisms in my test environment... no bueno...

Oh, yes...doesn't work cross-domain. But I don't think that applies in this thread.

Quote:

Originally Posted by Old Pedant (Post 1150123)

Oh, yes...doesn't work cross-domain. But I don't think that applies in this thread.

Neither does "asynchronous". I was the one to mention AJAX, but it wasn't a requirement of the OP. But I happened to have that code ready...
If he is only generating a console to display the actions of the users for example, he might prefer synchronous behavior...