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>