Skip to content

Instantly share code, notes, and snippets.

@pifantastic

pifantastic/index.html

Created January 26, 2011 00:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save pifantastic/795975 to your computer and use it in GitHub Desktop.
Save pifantastic/795975 to your computer and use it in GitHub Desktop.
Download ZIP
A simple todo list I'm using for an Intro to jQuery talk.
Raw
index.html
<!DOCTYPE hmtl>
<html>
<head><title>My todo list</title></head>
<body>
<h1>My todo list:</h1>
<form>
<input type="text" id="item" />
<input type="submit" id="save" value="Save" />
</form>
<ul id="list"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Load todo list from server.
$.getJSON('http://localhost/server.php', function(res) {
$('#list').html('<li>' + res.join('</li><li>') + '</li>');
});
// Add item to list.
$("form").submit(function() {
var item = $('#item').val();
$('#list').append('<li>' + item + '</li>');
save();
$('#item').val('');
return false;
});
// Remove item from list.
$('#list li').live('dblclick', function() {
$(this).remove();
save();
});
// Save list to server.
function save() {
var items = $('#list li').map(function() {
return $(this).text();
}).get();
$.ajax({
url: 'http://localhost/server.php',
data: { list: items }
});
}
});
</script>
</body>
</html>
Raw
server.php
<?php
session_start();
// Initialize session if empty.
if (!isset($_SESSION['list'])) {
$_SESSION['list'] = array();
}
// Update list.
if (isset($_REQUEST['list'])) {
$_SESSION['list'] = $_REQUEST['list'];
}
// Return list as JSON.
header('Content-Type: application/json');
die(json_encode($_SESSION['list']));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment