Google Sites - $.post not working

Troubleshooting
1

Hello I am trying to get started with the core and am running into some issues with google sites. I have used the blinking LED example as a base for this project. The relay shield is attached to pins 0 - 3 and the function 1on, 1off etc is attached to it.

If anyone is looking for code to use buttons instead of the radio button form in the tutorial this is working well except when hosted by google sites. When posted to google sites, it seems like the $.post( requestURL, { params: paramStr }); command is not working.

Other than hosting it with a regular web page, is there a solution?


<!DOCTYPE HTML>
<html>
<!-- google sites require 1.5 or 1.6 -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>

    <br><br>
    <button id="1on"  onclick="switchrelay(1,1)">Relay 1 On</button>
    <button id="1off"  onclick="switchrelay(1,0)">Relay 1 Off</button>
    <br><br>
    <button id="2on"  onclick="switchrelay(2,1)">Relay 2 On</button>
    <button id="2off"  onclick="switchrelay(2,0)">Relay 2 Off</button>
    <br><br>
    <button id="3on"  onclick="switchrelay(3,1)">Relay 3 On</button>
    <button id="3off"  onclick="switchrelay(3,0)">Relay 3 Off</button>
    <br><br>
    <button id="4on"  onclick="switchrelay(4,1)">Relay 4 On</button>
    <button id="4off"  onclick="switchrelay(4,0)">Relay 4 Off</button>
    <br><br>

    <!-- Request URL : <p id="sprinkle1"></p>  -->
    Last Command: <p id="sprinkle2"></p>

    <script type="text/javascript">
      var deviceID    = "<put your device ID here>";
      var accessToken = "<put the access token here>";
      var setFunc = "relay";

      function switchrelay(relaynum,newValue) {
        var paramStr = relaynum.toString();
        if (newValue==1) { 
           paramStr = paramStr + "on";
        } else {
          paramStr = paramStr + "off";
        }
    var requestURL = "https://api.particle.io/v1/devices/" +deviceID + "/" + setFunc + "?access_token=" + accessToken;
        $.post( requestURL, { params: paramStr });

       
      // document.getElementById("sprinkle1").innerHTML = requestURL;
      document.getElementById("sprinkle2").innerHTML = paramStr;
       

      }
    </script>

</body>
</html>
2

@avongil
Try making a POST request without jQuery.

function httpPost(url, params)
{
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
xhr.send(params);
}

Change your requestURL to:
var requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + setFunc

To call the function use:

httpPost(requestURL, "arg=" + paramStr);
3

Thank you for the suggestions. I would rather not rely on an external source and it has been implemented. Unfortunately, it will not work on google sites!

The reason I am using google sites is because it was quick and easy to set up authorized use of a web page. Should I abandon google sites?

4

Google makes a nice sandbox with Google sites but it is very limited. Here is a link to one way out of their sandbox using an “xml” widget, but you will have to host that widget elsewhere anyway.

5

You could try using GitHub Pages.

6

Thank you for all the help. I moved the web page over to my personal web site and created a password protected page there.

I really wanted it to work with google sites because then anyone in my domain could have access to it without me doing anything, but I think this will be less problematic. The xml widget idea is good, thanks. Decided not to implement because I have no idea what i’m doing with modern web pages and I think I would not be able to make it secure.

7

I would still recomend that you give GitHub pages a try in the future.

1 Like
8

Wow. That is cool. Will give it a try. Beats my plain Jane vanilla web page. That’s what I need these days easy web pages.