OnClick event on parent page to trigger an action on a child page?

[Pajo]

Hi all,

 

This will be probably the newbiest question you have had to deal with!

is it possible to trigger an event on one page which changes the source of an image on a different page?

 

Background: I have created a display page with either red or green status indicators. The child page will have the "Controls"

 

Here is my function

 

function change() {

var image = document.getElementById("imageID");

image.src = "red.png"

}

On the "Control" page I have a button with onclick attribute

<input type="button" value="Hard Down!" id="hybButton" onclick="change();">

On the display page I have an image with an ID of "imageID"

I can't get it to work, both pages are linked to the same .js file

[niche]

are the IDs the same?

[Pajo]

No Niche the button and image have different IDs, thanks.

[Ingolme]

A link to a JS file will just load a copy of the script onto that page. If you want communication between the two pages (and only if they're both within the same website) you will need a reference between them, such as the ID of a frame or the returned window from a window.open() call.

[Pajo]

Thanks Foxy, there are both on the same site at least.

[Ingolme]

But what's the relation between the two windows? They can't communicate between each other if they don't have a relation.

 

If the second window was opened by the first one then access between windows would be like this:

In the parent window:

var child = window.open("file.html");// Call change() in the child windowchild.change();

In the child window:

// call change() in the parent windowwindow.opener.change();

If the child is an iframe in the parent (<iframe id="child" src="page.html">)

In the parent window:

var child = document.getElementById("child");// Cross browser way to access the child windowif(child.contentWindow) {    child = child.contentWindow;}// Call change() method in the child windowchild.change();

In the child window:

// call change() in the parent windowwindow.parent.change();

[Pajo]

Wow thanks Foxy, this is great info. I'm going to go re-hash the pages, I like the idea of the child being in an iframe of the parent. this should work a treat!

Thanks again.

[Ingolme]

If the child window and parent window necessarily have to be together all the time then it's probably better to put all the content into the same document instead of two separate files, then you wouldn't need to worry about communication between windows.

[Pajo]

I'd love to do that the trouble is that the "display" page will be on show for management who have no interest in the "controls" as such.

They just want a visual aid of the status, it will be up to area owners to determine if there is a problem worhty enough to get their manager involved.

[Pajo]

I think I'll put everything on page one & use an iframe to display the part I need on page two.

[justsomeguy]

If you're only using Javascript, then the only thing you're changing is the page in your own browser. You are not changing anything on anyone else's browser. Javascript only runs in your browser. If you want to change the actual site then you can use Javascript to submit an ajax request to the server, and then use a server-side language like PHP to update your database or whatever else so that it changes on the page for everyone. If you're using static HTML pages without something like PHP then you cannot use Javascript to change the pages for everyone since Javascript is only running in your browser. The Javascript code that they run is their own code also, they can't change your page either. You need a server-side language to create dynamic pages that will change for everyone.

[Pajo]

Thanks for this vital info. If I get it working for me I should be able to hand it over to our guys who deal server side requests.