Pajo Posted September 26, 2014 Share Posted September 26, 2014 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 More sharing options...
niche Posted September 26, 2014 Share Posted September 26, 2014 are the IDs the same? Link to comment Share on other sites More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 No Niche the button and image have different IDs, thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2014 Share Posted September 26, 2014 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. 1 Link to comment Share on other sites More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 Thanks Foxy, there are both on the same site at least. Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2014 Share Posted September 26, 2014 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(); 1 Link to comment Share on other sites More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 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. Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2014 Share Posted September 26, 2014 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. 1 Link to comment Share on other sites More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 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 More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 I think I'll put everything on page one & use an iframe to display the part I need on page two. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 26, 2014 Share Posted September 26, 2014 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. 1 Link to comment Share on other sites More sharing options...
Pajo Posted September 26, 2014 Author Share Posted September 26, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now