Javascript / Jquery get() won't work on mobile browsers (calling node-red, node.js)

184 views Asked by At

I've been hacking round for about a week trying to work this out, so finally cracked and asked a question:

My setup is Raspberry Pi 2 running Apache and IBM's Node-Red. I'm using Apache to serve up a simple web page which calls Node-Red to kick off a flow (in this case it's to switch on and off lights via Open Zwave.)

The following solution works on desktop browsers (firefox / IE 11) but not on mobile browsers (IE on WP8.1 and Android browser). However the code triggers the "Alert" from mobile browsers, just not the $.get() Any ideas?

Note that I've used two different methods of calling the target, one proper JSON, the other just a string. Both work on desktop browsers, both fail mobile browsers.

Header:

<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11; IE=edge"/>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>

Script Section:

 <script>

// Wait until the page is loaded so that all the IDs are setup
$(document).ready(function(){
$('img').click(function(){ 
    switch ($(this).attr('id')) {
        case 'node-3-on':
            $.get("http://node-red:1880/setValueBinary.html", {nodeid:"3", value:"1"});
            alert ("node 3 on");
            break;
        case 'node-3-off':
            // alert ("node 3 off");
            $.get('http://node-red:1880/setValueBinary.html?nodeid=3&value=0');
            break;
// removed further case statements
            default:
            alert ("You shouldn't see this, some sort of error has happened.");
            };
    });
});
</script>

HTML:

<p><b>Switch 3:</b></p>
<p> <img src="images/green-tick.png" id="node-3-on" alt="Switch On" height="100" width="100" />
    <img src="images/red-cross.png" id="node-3-off" alt="Switch Off" width="100" height="100"/></p>
1

There are 1 answers

0
Fraser73 On

At the suggestion of a workmate I installed Chrome and set it up to do remote debug on my Android phone.

https://developer.chrome.com/devtools/docs/remote-debugging

It turns out that the problem was that for some reason desktop/laptop/tablet devices can resolve the shortname of the raspberry pi, however mobile phones can't. This is using the same DHCP and DNS servers. I went through the code and added FQDNs to all the URLs and it all works fine now.

I'm sort of glad and sort of livid.

Thanks all for your help.