Agent serving webpage - Multiple page navigation with Jquery mobile

Agent Code
1

Can the agent support a webpage where there are multiple pages (link ahref=, i.e.)? It seems to load every page and scroll down to the page when I attempt to navigate the site. Just want to make sure I’m not wasting my time, I may have errors… Using Jquery mobile…

2

Yes, you can implement multiple pages. You will need to parse the request in the handler and send the right page data for each page, though.

3

Thanks Hugo. Here’s what I have from what I understand:

`local html = @"

Control 
<meta name=""viewport"" content=""width=device-width, initial-scale=1""> 

<link rel=""stylesheet"" href=""http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"" />
<script src=""http://code.jquery.com/jquery-1.8.2.min.js""></script>
<script src=""http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js""></script>

<center><div data-role='header'>
    <h1>Control</h1>
</div>

<h2>Please select an area to control...</h2>

<div data-role='content' class='basic_bg'>
    

            <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <button class='btn btn-primary btn-large btn-block' onclick='xx()'>XX</button>
            <button class='btn btn-primary btn-large btn-block' onclick='yy()'>YY</button>
            <button class='btn btn-primary btn-large btn-block' onclick='zz()'>ZZ</button>
			</div>

	
	</center>
</div>
";

local xx = @"

Control 
<meta name=""viewport"" content=""width=device-width, initial-scale=1""> 

<link rel=""stylesheet"" href=""http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"" />
<script src=""http://code.jquery.com/jquery-1.8.2.min.js""></script>
<script src=""http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js""></script>

<center><div data-role='header'>
    <h1>Control</h1>
</div>

<h2>Please Select something...</h2>

<div data-role='content' class='basic_bg'>
    

            <div class='well' style='max-width: 400px; margin: 0 auto 10px;'>
            <button class='btn btn-primary btn-large btn-block' onclick='aa()'>A</button>
			</div>

	
	</center>
</div>
";

http.onrequest(function(request,res){
if (request.body == “”) {
res.send(200, html);
}
else if (request.body == “xx”) {
server.log(“xx requested”);
res.send(200, xx);
server.log(“xx sent”);
}
else{
server.log("Unrecognized Body: "+request.body);
}
});

`

The log shows that the request for the xx page was received, and sent. However the browser does not update (or whatever, display) the new html string sent form the agent. Am I missing something? Also am I correct in assuming that each new page needs to be a fully defined html document and not a page division?

Thanks!

4
Yes, you can implement multiple pages. You will need to parse the request in the handler and send the right page data for each page, though.

So re-reading your response, it seems I only need to send the page data… So how do I make the webpage switch to the new page when its received? A function that transitions the page upon the new request? Kinda lost here…

5

Also, why does a webpage display differently when served from the agent? I tried hosting this simple example:

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_slider_tooltip

Formatted for imp:

`local html = @"

Slider Control

  <label for='points'>Points:</label>
  <input type='range' name='points' id='points' value='50' min='0' max='100' data-popup-enabled='true'>
";

http.onrequest(function(request,res){
if (request.body == “”) {
res.send(200, html);
}
else{
server.log("Unrecognized Body: "+request.body);
}
});
`

But it seems to lose lots of functionality, features, and appearance. Am I missing something?

6

If I understand what you’re trying to do, you probably want to be looking at the path of the request, not the body to figure out what page to serve. Here’s the starting blocks of a “web server” that has two web pages and a couple API end points - all served from the agent:

`
// HTML for /index.html
local index = @"

Index Page

Hello World!

Control Page ";

// Function to render the index page (injects agentURL where needed)
function renderIndex() {
return format(index, http.agenturl())
}

// HTML for /control.html
local control = @"

Control Page

Control Your Device!

Index Page ";

// Function to render the control page (injects agentURL where needed)
function renderControl() {
return format(control, http.agenturl())
}

// API Handler (handles responses whose path start with "/api/"
function apiHandler(req, resp) {
local path = req.path.tolower();

switch (path) {
    case "/api/led/on":
    case "/api/led/on/":
        device.send("led", 1);
        resp.send(200, http.jsonencode({ "msg": "ok" });
        break;
    case "/api/led/on":
    case "/api/led/on/":
        device.send("led", 0);
        resp.send(200, http.jsonencode({ "msg": "ok" });
        break;
    default:
        resp.send(404, http.jsonencode({ "msg": "unknown" });
}

}

// The main HTTP handler
http.onrequest(function(req, resp) {
local path = req.path.tolower();

// If the path starts with API, call the API handler
if (path.find("/api/") == 0) {
    apiHandler(req, resp);
    return;
}

// If user browsed to "index" of {agentUrl}
if (path == "" || path == "/" || path == "/index.html" || path == "/index.html/") {
    resp.send(200, renderIndex());
    return;
}
// If user browsed to {agentUrl}/control
if (path == "/control.html" || path == "/control.html/") {
    resp.send(200, renderControl());
    return;
}

// Default cause:
resp.send(404, "Uh oh! I don't know that URL!");

});`

7

Thanks Matt. Makes alot of sense now. Thank you. Do you have any idea why the slider example from W3C does not display properly when hosted from the agent? The slider looks like a base range input, so maybe the src files are not linked properly? Thanks again!

8

If you open up your browser’s Developer Tools (cmd+alt+i on a Mac) you’ll get a clue :slight_smile:

In the Javascript console at the bottom you should see the following:

Browsers don’t like mixing HTTPS and HTTP (as that’s a potential vector for online attacks) - you’re using HTTPS endpoints to serve the webpage, but HTTP endpoints to load your resources (the jQuery mobile css and js).

This is a super easy fix - if you change the “http://…” to “//…” in your script and link tags, it use whatever protocol (HTTP or HTTPS) the page was loaded with. Here’s the modified code:

`local html = @"

; ; ;

Slider Control

  <label for='points'>Points:</label>
  <input type='range' name='points' id='points' value='50' min='0' max='100' data-popup-enabled='true'>
";

http.onrequest(function(request,res){
if (request.body == “”) {
res.send(200, html);
}
else{
server.log("Unrecognized Body: "+request.body);
}
});`

9

THANK YOU!!!

10

no problem :slight_smile: always happy to help!