Can a JavaScript function send two url requests from one link?

JavaScript
1

Hi,

I’m not very skilled at JavaScript, I just manage to use it when needed. I have a web page that gives me controls to remotely turn on or off a few items around the building, such as lights, ceiling fans and computers. The web page has no links to anything other than the server that hosts it, and there are no other pages. All links on the page send a string which is read by the server, and then a part of the server’s code is executed. Everything is functional, just not quite the way I want it.

I am trying to find a simple yet effective method of getting the web page to update after I click a button, say to turn on a light in a room. Right now, the web page is created based on inputs from a board controlling a set of relays, so if a particular relay is on, the page only gives me the option to turn off that relay. I’m not sure if you’d call this dynamic, but it’s at least conditional. When I click a button to turn on/off something, the page doesn’t update to show the change until the next time I click a button, or if I make the page auto-refresh. Due to the strings sent by the page, I don’t want to use a page refresh from the browser because it will resend the same string causing problems in some cases. I added a redirect which sort of serves the purpose by requesting the base page of http://server.ip/ with no added string, except that makes the browser constantly busy pulling the page every x seconds. But currently x is about the maximum time I’d like to wait after clicking a button before the page is updated.

I am thinking JavaScript should be able to do what I need, but I have not been able to get it to work. Either I may need to find a way to make the content="3; in the following

<meta http-equiv="refresh" content="3; url=http://server.ip/">

be variable based on just having clicked a button, perhaps redirect to http://server.ip/ in 1 second if I just clicked a button, and change to 200 seconds after that, or add some javascript functions that are called when a button is clicked, such as

<SCRIPT LANGUAGE="JavaScript">
var myURL='';
function myMultiLink(myURL) {
          window.location.href='myURL'
          window.location.href='http://server.ip/';
          }
function url1() {
          var myURL = 'http://server.ip/?device1on';
          myMultiLink();
          }
function url2() {
          var myURL = 'http://server.ip/?device1off';
          myMultiLink();
          }
          </script>

so that myURL is a variable set when a button is clicked. The functions might be called from the links on the page like this:

<a onclick="function url1()" href="javascript:void(0); return false">Fan On</a><br /><br /><br />

I want the function to assign the string such as /?device2on to myURL variable, then call myMultiLink() passing myURL to it and have that function request for example http://server.ip/?device2on (which doesn’t load a new page but only sends /?device2on to the server to carry out) and then the function request for the base page of http://server.ip/ to load which will refresh the contents showing the updated status (light is now on, so page should show option to turn it off).

The code above doesn’t work for me at all, as in nothing happens when I click the links. I am obviously doing something wrong, but I don’t know what/where it is. I own all the equipment involved, but am not able to implement any server-side scripting due to hardware/software limitations(at least as far as I know). I can make the server add components to the web page based on other factors as needed. Any suggestions/solutions are greatly appreciated!

Thanks,

Kent

2

Hi there,

Welcome to the forums :slight_smile:

I read your question, but am not 100% sure that I understand it.

Can we make it a bit more simple?

You have a web page page, which has a button.
Clicking this button turns a light in your building on or off.
When you click the button, you would like to have the page update, to show the status of the light.

Did I get that right?

3

Hi Pullo and thanks for your reply.

Yes, you got it right. If I leave out the redirect which effectively refreshes my page for me, then the page basically updates the next time I click a button, except not for the button I last hit. So if main room fan is on and secondary room light is on, and I click main room fan off and secondary room light off buttons in that order, the page will update when I hit secondary room light off showing main room fan is off, but will still show secondary room light is on. Yet both will physically be off.

4

Hi,

Can you define what you mean by update?

It is possible to get the browser to load another page when a button is hit, or to send an AJAX request somewhere and insert the response into the page.
You can also refresh the current page using location.reload();

I understand that this is running locally, but it would be great if I could see the page in question (or at least the code behind it).

5

By update, the web page contents change to show that, for instance, if a light is now on, the option given is to turn it off. I’ve attached a screenshot of what part of the page looks like.

I knew of location.reload(); but was unsure if it would reload the page URL displayed in the browser, or just the URL of the page it was contained in (ie… http://server.ip/?device1on or http://server.ip/). I’ll make a point to test that out today.

I’ve seen much on AJAX in my weeks of searching for a solution. I don’t know how to implement it as of yet, but I may need to learn if that turns out to be the best or easiest solution.

Below is the html of the page, just a snapshot (browser’s view page source) of what it was at a particular time.

<HTML>
<HEAD>
<TITLE>Automation</TITLE>
</HEAD>
<BODY>
<H1>Automation</H1>
<hr />
<H2>Main Room</H2>
<br />
Fan is <font color='red'><b>OFF</b></font><br /><br />
<a href="/?device1on">Fan On</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<H2>Secondary Room</H2>
<br />
Light is <font color='green'><b>ON</b></font><br /><br />
<a href="/?device2off">Light Off</a><br /><br /><br />
Fan is <font color='green'><b>ON</b></font><br /><br />
<a href="/?device3off">Fan Off</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<H2>Office</H2>
<br />
Media Vault is <font color='red'><b>OFF</b></font><br /><br />
<a href="/?mvon">Turn Media Vault On</a><br /><br />
<br />
PC is <font color='green'><b>ON</b></font><br /><br />
<a href="/?pcoff">Suspend PC</a><br /><br /><br />
<a href="/?pcreset">PC Reset</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<br />
</BODY>
</HTML>

It is possible to load another page, but the web server, which is an Arduino, does not have any storage. The page is generated in RAM only and served from there. Adding other pages would require storage to my knowledge. That is not a huge problem, but to make use of storage would require significant rewriting of the Arduino code, and is planned for a future phase of this project. My boss needs me to demonstrate the benefits of this project for the mobility impaired before advancing to other phases, but wanted the UI to be a bit more useful (minimal clicks).

Thank you!

6

Easy but relying on javascript won’t always work don’t forget javascript can be turned off in a browser. You would be better off using a server-side script like php or asp for this and a form. however this will do the trick.

<body>
<a href="http://www.mydomain.com?ReportID=1" id="redirect" onclick="window.location.assign('http://www.mydomain.com?ReportID=1')" target="_blank">Report</a>
</body>

Also I know it probably isn’t necessary but you can nest any number of urls using window.open(“url”,“_blank”);

<body>
<a href="http://www.mydomain.com?ReportID=1" id="redirect" onclick="window.location.assign('http://www.mydomain.com?ReportID=1');window.open('http://www.smkproduction.eu5.org','_blank');window.open('http://www.smkproduction.eu5.org','_blank')" target="_blank">Report</a>
</body>
7

Hi,

Fan is <font color='red'><b>OFF</b></font><br /><br />
<a href="/?device1on">Fan On</a><br /><br /><br />
<a href="/">Refresh Page</a><br />

So, you click “Fan On”, the fan is turned on and a new page is generated by the server.
However, the server doesn’t send this new page (i.e. you don’t get any feedback about whether the fan is now on) until you press refresh.
Is that correct?

If so, you could just do:

var links = document.querySelectorAll("a");

for (var i=0, len=links.length; i<len; i++){
    links[i].onclick = function(){
        setTimeout(function(){ location.reload(); }, 500);
    }
}

which attaches an event handler to each link, so that when they are clicked, the page is reloaded 500 milliseconds later.

8

No thats not how it works ?device on is a server side get request method form. By click the ?deviceon link the form is submitted with this data and server side data needs to be refreshed to update but the request will have processed already. It is like this forum using post method forms. The new posts are only visible if you reload the page.

9

Right, and you normally have the form submit to itself for this purpose.

However, you notice that there is no <form> element in the code the op provided.

Essentially it sounds like a simple problem to solve, but the Arduino factor is an unknown for me.

10

@ fiveworlds, doesn’t all the _blank target a new window? I only have one page and I want all links to open in same page.

11

Thanks Pullo, and you are correct in your assessment. So, based also on @fiveworlds more recent post, should your code work in my situation? If so, I will try that and see what happens.

12

I would think so. Just give it a try :slight_smile:

13

Pullo, I should have quoted your previous post which I was answering in my last post. In your last post, you are correct as there is no form element. The Arduino factor might best be read as ‘simple device acting as a web server’. I can make it serve up virtually any page I need it to, as long as I can figure out the code for the page itself firstly, and that it doesn’t exceed RAM capacity, which I am far from currently. I just can’t install anything server-side to make it do anything that requires any more complexity than calling scripts contained in additional files. I could manage to include additional files by implementing a storage device. :slight_smile:

14

Hi Pullo,
Sorry for the delay but I had to wait for an ideal time to put your code into service. Maybe I made an incorrect assumption that the code belongs in <script> tags in the <head> section of my page. The links work but there is no refresh taking place. I even changed the timeout from 500 to 1500 just so I might have a better chance to see the refresh take place for testing.

<SCRIPT LANGUAGE="JavaScript">
var links = document.querySelectorAll("a")
for (var i=0, len=links.length; i<len; i++){
links[i].onclick = function(){
setTimeout(function(){ location.reload(); }, 1500);
}
}
</SCRIPT>

Do I need to change my links in any way, or is your event handler aimed at capturing each click?

Thanks for all your help!

15

Hi,

No probs :slight_smile:

The script belongs at the bottom of the page, before the closing body tag:

<HTML>
<HEAD>
<TITLE>Automation</TITLE>
</HEAD>
<BODY>
<H1>Automation</H1>
<hr />
<H2>Main Room</H2>
<br />
Fan is <font color='red'><b>OFF</b></font><br /><br />
<a href="/?device1on">Fan On</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<H2>Secondary Room</H2>
<br />
Light is <font color='green'><b>ON</b></font><br /><br />
<a href="/?device2off">Light Off</a><br /><br /><br />
Fan is <font color='green'><b>ON</b></font><br /><br />
<a href="/?device3off">Fan Off</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<H2>Office</H2>
<br />
Media Vault is <font color='red'><b>OFF</b></font><br /><br />
<a href="/?mvon">Turn Media Vault On</a><br /><br />
<br />
PC is <font color='green'><b>ON</b></font><br /><br />
<a href="/?pcoff">Suspend PC</a><br /><br /><br />
<a href="/?pcreset">PC Reset</a><br /><br /><br />
<a href="/">Refresh Page</a><br />
<br />
<hr />
<br />

[B]<script type="text/javascript">
  var links = document.querySelectorAll("a")
  for (var i=0, len=links.length; i<len; i++){
    links[i].onclick = function(){
      setTimeout(function(){ location.reload(); }, 1500);
    }
  }
</script>[/B]
</BODY>
</HTML>

BTW, the language attribute has been deprecated. It’s better to write:

<script type="text/javascript">
   ...
</script>
16

Hi Pullo,

It still gives the same behavior when I move the script just before the closing body tag. Links work but there is no refresh being sent. I verified the browsers I tested with are not caching an old page. I’m using Chrome in general but testing with IE and FF as well on a PC, and also Chrome on a tablet. Behavior is identical on each so far.

Just for grins, I modified a locally saved page based on this page, making the links bookmarks to other places within the same page so that the browser never leaves the page. Somehow the refresh script appears to be taking place because I can see the refresh button blink to an ‘X’ briefly 1.5 seconds after clicking on any of those links to bookmarks within the page. Oddly, the refresh links which now point to the same local file as my page, do not refresh 1.5 seconds after clicking them. I just state that because it’s odd, not that a refresh link would need to refresh the page twice. The code of the test page is:

<HTML>
<HEAD>
<TITLE>Automation</TITLE>
</HEAD>
<BODY>
<H1>Automation</H1>
<hr />
<H2><a id="main_room">Main Room</a></H2>
<br />
Fan is <font color='red'><b>OFF</b></font><br /><br />
<a href="#sec_room">Fan On</a><br /><br /><br />
<a href="file:///home/kent/Desktop/test.html">Refresh Page</a><br />
<br />
<hr />
<H2><a id="sec_room">Secondary Room</a></H2>
<br />
Light is <font color='green'><b>ON</b></font><br /><br />
<a href="#office">Light Off</a><br /><br /><br />
Fan is <font color='green'><b>ON</b></font><br /><br />
<a href="#main_room">Fan Off</a><br /><br /><br />
<a href="file:///home/kent/Desktop/test.html">Refresh Page</a><br />
<br />
<hr />
<H2><a id="office">Office</a></H2>
<br />
Media Vault is <font color='red'><b>OFF</b></font><br /><br />
<a href="#main_room">Turn Media Vault On</a><br /><br />
<br />
PC is <font color='green'><b>ON</b></font><br /><br />
<a href="#main_room">Suspend PC</a><br /><br /><br />
<a href="#main_room">PC Reset</a><br /><br /><br />
<a href="file:///home/kent/Desktop/test.html">Refresh Page</a><br />
<br />
<hr />
<br />

<script type="text/javascript">
  var links = document.querySelectorAll("a")
  for (var i=0, len=links.length; i<len; i++){
    links[i].onclick = function(){
      setTimeout(function(){ location.reload(); }, 1500);
    }
  }
</script>
</BODY>
</HTML>

But I am not sure why my original page links don’t seem to be captured by the event handler in the script.

Many thanks!

17

Hi there,

I’m sorry, but the Arduino is an unknown factor for me and I have no idea why it isn’t working.

If I’m to think of the it as a simple web server, would it be feasible to set it up so that there is more than one page on it?

This way you could perhaps write a simple PHP script, which receives commands, switches the appropriate things on/off, and then returns a response.
Then you could use your HTML page as a control panel to send AJAX requests to the PHP script, updating the HTML page depending on the response returned.

Saying this, I have zero experience of using an Arduino, so if anyone has any better idea, please speak up.

18

Hi Pullo,

I’m beginning to see the complexity of what I thought might be a simple solution.

In order to add PHP, it would require setting up a computer to act as the server between the Arduino and the local network. I can’t thank you enough for the time and effort you put in for this project. You’ve been a great help! :slight_smile:

Thanks again,

Kent