Harjutuse lisamise-salvestamise näide
Allikas: Lambda
<html>
<head><title></title>
</head>
<body>
<script src="jquery.js" type="text/javascript">
</script>
<script>
var todostore;
function change(i) {
/* load fields */
item = todostore[i];
$("#editid").val(item.id);
$("#esalvestaja").val(item.salvestaja);
$("#etodoname").val(item.f0);
$("#etododesc").val(item.f1);
}
function sendEditForm() {
var url = "http://dijkstra.cs.ttu.ee/~irve/cgi-bin/ui/uuenda.py?table=t0";
url += "&f0=" + $("#todoname").val();
url += "&f1=" + $("#tododesc").val();
$("#debug").html(url);
$.getJSON(url, sendFormCallback);
return false;
}
function renderTableCallback(todolist, textStatus, jqXHR) {
todostore = todolist;
if (todolist == 0 || todolist.length == 0) {
$("#todotable").html("No results, add some; might be our error too, sorry.");
return;
}
result ="<tr><th>Name</th><th>Description</th></tr>\n";
for ( i=0; i < todolist.length; i++ ) {
result += "<tr>";
result += "<td>" + todolist[i].f0 + "</td>";
result += "<td>" + todolist[i].f1 + "</td>";
result += "<td><a href=\"javascript:change(" + i + ")\">[Muuda]</a></td>";
result += "</tr>";
}
$("#todotable").html(result);
}
function renderTable() {
$.getJSON("http://dijkstra.cs.ttu.ee/~irve/cgi-bin/ui/otsi.py?salvestaja=test@example.ee&table=t0&order=f0&direction=desc", renderTableCallback);
}
function sendFormCallback(status, textStatus, jqXHR) {
if (status == 0 ) {
$("#debug").html("Sending unsuccessful");
return;
}
renderTable();
}
function sendForm() {
var url = "http://dijkstra.cs.ttu.ee/~irve/cgi-bin/ui/salvesta.py?table=t0";
url += "&salvestaja=" + $("#salvestaja").val();
url += "&f0=" + $("#todoname").val();
url += "&f1=" + $("#tododesc").val();
/*$("#debug").html(url);*/
$.getJSON(url, sendFormCallback);
return false;
}
function sendEditForm() {
var url = "http://dijkstra.cs.ttu.ee/~irve/cgi-bin/ui/uuenda.py?table=t0";
url += "&salvestaja=" + $("#esalvestaja").val();
url += "&f0=" + $("#etodoname").val();
url += "&f1=" + $("#etododesc").val();
url += "&id=" + $("#editid").val();
$("#debug").html(url);
$.getJSON(url, sendFormCallback); /* note shared function */
return false;
}
$(document).ready( function() {
renderTable();
});
</script>
<form onsubmit="return sendForm();">
<p>Insert item</p>
<input id="id" type="hidden" value=""/><br />
<input id="salvestaja" type="text" value="test@example.ee" /><br />
<input id="todoname" type="text" placeholder="Todo name" /><br />
<input id="tododesc" type="text" placeholder="Description" /><br />
<input id="send" type="submit" value="Save"/><br />
</form>
<form onsubmit="return sendEditForm();">
<p>Edit item</p>
<input id="editid" type="hidden" value=""/><br />
<input id="esalvestaja" type="text" value="test@example.ee" /><br />
<input id="etodoname" type="text" placeholder="Todo name" /><br />
<input id="etododesc" type="text" placeholder="Description" /><br />
<input id="esend" type="submit" value="Save"/><br />
</form>
<div id="debug">
</div>
<table id="todotable">
</table>
</body>
</html>
