Updating content from one page to another?

Hey Everyone,
I am trying to send a javascript request from page_1.html to page_2.html, and have page_2.html rewrite the content on page_1.html,

the code I am using to request page_2.html from page_1.html (so the following code is on page_1.html, just to be clear) , this code works fine on other projects.


<script type="text/javascript">

var ajaxRequest; 

try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				
				return false;
			}
		}
	}


ajaxRequest.open("GET", "/page_2.html", true);
ajaxRequest.send(null);

}
</script>
<div id="testContent"></div>

And the code I am using on page_2.html, which does not work yet is:

opener.document.getElementById('testContent').innerHTML = 'Hello!';

I want the div block with the id of ‘testContent’ to have ‘Hello’ written in it on page_1.html, when page_2.html gets called from page_1.html

Hopefully I explained this properly, I am sure it’s not working right now becuase of the “opener.doc…” not being used correctly or something.
Any help would be great!

In order for two documents to be able to communicate with each other, you need to either use window.open, frames/iframes, or you need to create some serverside program which both windows talk to in order to collaborate.

Sounds like you probably want separate windows, so see window.open

From your reply, i researched window.open, but i am not sure if it will accomplish what I want it to do. It seems like window.open will open a new window, I don’t want page_2.html to actually open up in the broswer. Also i can’t find any documentation on window.open that allows you to update content on the page_1.html. Any thoughts?


<b id="testContent"></b>
<iframe src="child.html"></iframe>

In child.html do


window.parent.document.getElementById("testContent").innerHTML = 'Hello!';

hmm, anyway to do that without the iframe?

Why? What problem are you facing with iframes?

Now that I think about it, I guess I can give it a try. Let me see if i can get it to do what i need it to.

So i just tried and it kind of solves what I want to do, but are there other ways? To do what I mentioned in my orginal post?

Here is a link to the functionality I am looking for. Although I am not trying to make twitter-like pagination, this is what I want my pages to do.

Any thoughts?

It sounds like you’re after an Ajax solution then.

i guess so, I just figured it out. I just wanted a solution with some sort of javascript. As I am new to javascript, is ajax not considered javascript? or at least some sort of javascript? :slight_smile:

I’ll post the code in a second, but pretty similar to that link I just posted. Thanks for everyone’s help!

Ajax is a part of JavaScript, and is a common term to refer to asynchronous communication with the server (send and receive data without reloading the page).

A good reference is the Bulletproof Ajax book which also has the [url=“http://bulletproofajax.com/code/”]code and examples from the book freely available.

<!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>
<title>Test</title>
<meta name="keywords" content="Test"/>	
<meta name="description" content="Test"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <script type="text/javascript"/>
window.onload = prepareLinks;

function prepareLinks() {
  if (!document.getElementById || !document.getElementsByTagName) {
    return;
  }
 
 
  var links = document.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    links[i].onclick = function() {
      var query = 'id=2';
      var url = "page_2.php?"+query;
      return !grabFile(url);
    };
  }
}
function grabFile(file) {
  var request = getHTTPObject();
  if (request) {
    request.onreadystatechange = function() {
      parseResponse(request);
    };
    request.open("GET", file, true);
    request.send(null);
    return true;
  } else {
    return false;
  }
}

function parseResponse(request) {
  if (request.readyState == 4) {
    if (request.status == 200 || request.status == 304) {
      var details = document.getElementById("details");
      details.innerHTML = request.responseText;
    }
  }
}

function getHTTPObject() {
  var xhr = false;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        xhr = false;
      }
    }
  }
  return xhr;
}
</script>

</head>
<body>

<a href="">CLick Me</a>
<div id="details"></div>
</body>
</html>

So basically my page_2.php page returns the proper data based on “?id=” and then the output is written back to page_1.html in the div with the id of “details”,

ajax is cool