How to get HTML webpage to react to response code? (such as getting status)

Agent Code
1

Hi. I have been doing some experiments and I have HTML code in the Agent section.
If user presses the “Get status” button on the website, it should update the status of one of the pins. How do I do that? Or at least show me how to change the HTML webpage after the button press

I thought this would work, but it doesn’t: response.send(200, “hi”)

Please run the following Agent code and let me know what you think:
`
const html = @"

    <script src=""http://code.jquery.com/jquery-1.9.1.min.js""></script>
    <script src=""http://code.jquery.com/jquery-migrate-1.2.1.min.js""></script>
    <script src=""http://d2c5utp5fpfikz.cloudfront.net/2_3_1/js/bootstrap.min.js""></script>
    
    <link href=""//d2c5utp5fpfikz.cloudfront.net/2_3_1/css/bootstrap.min.css"" rel=""stylesheet"">
    <link href=""//d2c5utp5fpfikz.cloudfront.net/2_3_1/css/bootstrap-responsive.min.css"" rel=""stylesheet"">

    <title>testing</title>
</head>
<body>
    <script type='text/javascript'>
        function sendToImp(value){
            if (window.XMLHttpRequest) {devInfoReq=new XMLHttpRequest();}
            else {devInfoReq=new ActiveXObject(""Microsoft.XMLHTTP"");}
            try {
                devInfoReq.open('POST', document.URL, false);
                devInfoReq.send(value);
            } catch (err) {
                console.log('Error parsing device info from imp');
            }
        }
        function getStatus(){
            sendToImp('getStatus');
        }
    </script>
    <div class='container'>
        <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <button class='btn btn-primary btn-large btn-block' onclick='getStatus()'>Get Status</button>
        </div>
        <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <div id='statusInfo'></div>
        </div>
    </div>
</body>
";

//-------------------------------------------------------------------------------

function requestHandler(request, response) {
try {
if (request.body == “”) {
response.send(200, html);
}else{
if(request.body == “getStatus”){
local responseKey = generateKey(); // generate key, and store the response object
responses[responseKey] <- { resp = response, t = time() };

        device.send("status", { k = responseKey, d = null });
        return;
    }else{
        server.log("Unrecognized Body: " + request.body);
    }
    response.send(200, "");
}

} catch (ex) {
response.send(500, "Internal Server Error: " + ex);
}
}

function writeStatus(data) {
// send status info to website
}

http.onrequest(requestHandler);
device.on(“status”,writeStatus);`

2

I haven’t tried your code, @f3a46, but I’d suggest it’s not a good idea to true and use the agent to serve the page that presents the ‘Get Status’ button. They have to key in the agent URL to get the page to click a button which send a small string to the agent URL. Better to simply enter the string into the URL in the first place. Better still to mask the URL (a little) in a separate web page.

I digress. I think you need to change this line:

devInfoReq.open('POST', document.URL, false);

to

devInfoReq.open('GET', document.URL, false);

I don’t know the API, but I do know that http.onrequest() works with requests to the server for data, ie. a GET, not attempts to post data to the server, ie POST.

3

@smittytone - not true - http.onrequest() intercepts all incoming HTTPS requests.

Additionally, you can determine what verb (GET, PUT, POST, etc) was used by looking at request.method.

@f3a46 - it looks like you’ve cherry picked various bits of code, and what you have is not quite complete. Your webpage isn’t returning any data, because the requests you’re making are encountering errors, and returning a 500 status (due to the try catch). The first thing you should do is remove the try/catch in your http handler, and figure out where the errors are coming from.

4

@beardedinventor - thanks for pointing out the error. This is just a simplify version of my code, so apparently I missed out certain parts. Please see the following fixed Agent code.

I am still clueless on how to display the status (or certain messages such as “hi”) on the webpage after user has pressed the button :frowning:

`const html = @"

    <script src=""http://code.jquery.com/jquery-1.9.1.min.js""></script>
    <script src=""http://code.jquery.com/jquery-migrate-1.2.1.min.js""></script>
    <script src=""http://d2c5utp5fpfikz.cloudfront.net/2_3_1/js/bootstrap.min.js""></script>
    
    <link href=""//d2c5utp5fpfikz.cloudfront.net/2_3_1/css/bootstrap.min.css"" rel=""stylesheet"">
    <link href=""//d2c5utp5fpfikz.cloudfront.net/2_3_1/css/bootstrap-responsive.min.css"" rel=""stylesheet"">

    <title>testing</title>
</head>
<body>
    <script type='text/javascript'>
        function sendToImp(value){
            if (window.XMLHttpRequest) {devInfoReq=new XMLHttpRequest();}
            else {devInfoReq=new ActiveXObject(""Microsoft.XMLHTTP"");}
            try {
                devInfoReq.open('POST', document.URL, false);
                devInfoReq.send(value);
            } catch (err) {
                console.log('Error parsing device info from imp');
            }
        }
        function getStatus(){
            sendToImp('getStatus');
        }
    </script>
    <div class='container'>
        <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <button class='btn btn-primary btn-large btn-block' onclick='getStatus()'>Get Status</button>
        </div>
        <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <div id='statusInfo'></div>
        </div>
    </div>
</body>
";

//-------------------------------------------------------------------------------

function requestHandler(request, response) {
try {
if (request.body == “”) {
response.send(200, html);
}else{
if(request.body == “getStatus”){
server.log(“getStatus”);
//return;
}else{
server.log("Unrecognized Body: " + request.body);
}
response.send(200, “”);
}
} catch (ex) {
server.log(“Error”);
response.send(500, "Internal Server Error: " + ex);
}
}

function writeStatus(data) {
// send status info to website
}

http.onrequest(requestHandler);
device.on(“status”,writeStatus);`

5

You need to use something called AJAX - which is a web development technique where you make an asynchronous request in the web page’s javascript to fetch some data, then modify the contents of the webpage when it has responded. Take a look at this example to see how it works.

I don’t think a forum post is quite the right place to go into all of the details - but luckily I’ve been planning on writing a blog post about this for the new Community Portal - so keep an eye out for that (I’ll also try to remember to post back here when it’s up).

6

Thanks! I’ll take a look once I have the time :slight_smile: