Jump to content

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


Pajo
 Share

Recommended Posts

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
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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();
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...