Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

169 lines (161 sloc) 6.122 kb
<html>
<head>
<title>Demo ewsjs Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="ewsjs.js"></script>
<script type="text/javascript">
(function($) {
var h, i, dbcache, id, route, findById, router;
// initialize our database and auto-increment
id = 0;
dbcache = {person: []};
findById = function(id) {
var ret = -1, i;
for (i=0;i<dbcache.person.length;i++) {
if (dbcache.person[i].id === id+"") {
ret = i;
break;
}
}
return(ret);
};
router = {
"/person": {
"GET": function(config) {
// get the persons from our db
return({status: 200, response: dbcache.person, headers: {"Content-Type":"application/json"}});
},
"POST": function(config) {
// increment the unique ID
id++;
config.data.id = id+""; // we keep string IDs
dbcache.person.push(config.data);
return({status:201,response:id,headers: {"Content-Type":"text/plain"}});
}
},
"/person/:id": {
"GET": function(config) {
var idx = findById(config.params.id), ret;
if (idx > -1) {
ret = {status: 200, response: JSON.stringify(dbcache.person[idx]),headers: {"Content-Type":"application/json"}};
} else {
ret = {status: 404};
}
return(ret);
},
"PUT": function(config) {
var ret, idx = findById(config.params.id);
if (idx > -1) {
dbcache.person[idx].firstName = config.data.firstName;
dbcache.person[idx].lastName = config.data.lastName;
ret = {status: 200};
} else {
ret = {status: 404};
}
return(ret);
},
"DELETE": function(config) {
var ret, idx = findById(config.params.id);
if (idx > -1) {
dbcache.person.splice(idx,1);
ret = {status:200};
} else {
ret = {status:404};
}
return(ret);
}
}
};
// simple to wrap around the actual handler, makes it easier to handle GET/PUT/POST/DELETE
var handlerFn = function(r) {
return function(config){
if (r[config.method]) {
return(r[config.method](config));
}
};
};
for (route in router) {
if (router.hasOwnProperty(route)) {
EWS.registerHandler(route,handlerFn(router[route]));
}
}
}(jQuery));
</script>
<script type="text/javascript">
// use our ajax instead
EWS.enable(true);
var ajax = $.ajax;
$(document).ready(function(){
var refresh = function() {
ajax({type: "GET", url: "/person", success: function(res,status) {
var i, tbody = $("table tbody"), tr;
// empty the old out
tbody.empty();
// add each row
for (i=0;i<res.length;i++) {
tr = $("<tr></tr>");
$("<td></td>").addClass("personid").text(res[i].id).appendTo(tr);
$("<td></td>").append($("<input></input>").attr("type","text").attr("name","firstname").val(res[i].firstName)).appendTo(tr); $("<td></td>").append($("<input></input>").attr("type","text").attr("name","lastname").val(res[i].lastName)).appendTo(tr); $("<td></td>").append($("<input></input>").attr("type","button").attr("name","delete").val("Delete")).appendTo(tr); $("<td></td>").append($("<input></input>").attr("type","button").attr("name","save").val("Save")).appendTo(tr);
tr.appendTo(tbody);
}
// add the new row
tr = $("<tr></tr>");
$("<td></td>").addClass("personid").text("NEW").appendTo(tr);
$("<td></td>").append($("<input></input>").attr("type","text").attr("name","firstname").val("")).appendTo(tr); $("<td></td>").append($("<input></input>").attr("type","text").attr("name","lastname").val("")).appendTo(tr);
$("<td></td>").appendTo(tr); $("<td></td>").append($("<input></input>").attr("type","button").attr("name","addnew").val("Add New")).appendTo(tr);
tr.appendTo(tbody);
},dataType: "json"});
};
// wire up the "Add New" button
$(":input[name=addnew]").live("click",function(e){
// get the first name and last name
var row = $(this).closest("tr");
var firstName = row.find(":input[name=firstname]").val();
var lastName = row.find(":input[name=lastname]").val();
ajax({type: "POST",url:"/person",data: {firstName: firstName, lastName: lastName}, success: function(res, status) {
refresh();
},dataType: "json"});
});
// wire up the "Save" button
$(":input[name=save]").live("click",function(e){
// get the first name and last name
var row = $(this).closest("tr");
var firstName = row.find(":input[name=firstname]").val();
var lastName = row.find(":input[name=lastname]").val();
var id = row.find("td.personid").text();
ajax({type: "PUT",url:"/person/"+id,data: {firstName: firstName, lastName: lastName}, success: function(res, status) {
refresh();
},dataType: "json"});
});
// wire up the "Delete" button
$(":input[name=delete]").live("click",function(e){
// get the first name and last name
var row = $(this).closest("tr");
var id = row.find("td.personid").text();
ajax({type: "DELETE",url:"/person/"+id, success: function(res, status) {
refresh();
},dataType: "json"});
});
refresh();
});
</script>
</head>
<body>
<h2>Demo ewsjs Page</h2>
<div>
This page demonstrates the embedded Web server <a href="http://github.com/deitch/ewsjs">http://github.com/deitch/ewsjs</a>
ewsjs library. To use this page, you can do some basic CRUD operations, which map to REST activities, entirely within the
browser.
</div>
<div>
<table>
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>Delete</th><th>Save</th></tr>
</thead>
<tbody>
<tr><td class="personid">NEW</td><td><input type="text" name="firstname"></td><td><input type="text" name="lastname"></td><td></td><td><input type="button" value="Add New" name="addnew"></input></td></tr>
</tbody>
</table>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.