<?php require_once('connect.php'); require_once('tasks.php'); if (!dbConnect()) { echo 'Unable to establish database connection'; exit; } //W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>Sortable List with Ajax and PHP</title> <link rel="stylesheet" type="text/css" href="sortable.css" /> <script type="text/javascript" src="scriptaculous-js-1.6.4/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.6.4/src/scriptaculous.js"></script> <script type="text/javascript" src="tasks.js"></script> </head> <body onload="delTask()"> <h1>Sortable List</h1> <div id="newList"> <ul id="task_list" class="sortable"> <?php foreach (tasks as task) { ?> <li id="task_<?= task ?></li> <?php } ?> </ul> </div> <hr /> <h3>Add New Task</h3> <form> <input type="text" name="newTask" id="newTask" size="50" maxlength="100" /> <input type="button" name="addTask" id="addTask" value="Add Task" onclick="appendTask()"/> </form> <br /><br /> <hr /> <div id="dropZone"><strong> Drop Tasks Here to Delete</strong></div> <script type="text/javascript"> var id = 0; function delTask () { Droppables.add ('dropZone', {onDrop: function (element) { var myDelete = confirm("Do you want to delete this task?"); if (myDelete) { Element.hide(element); removeTask(element.id); } } }); } function updateList() { new Ajax.Request('order.php', {method : 'post', parameters : Sortable.serialize('task_list')}); } Sortable.create('task_list', { tag: "li", onUpdate : updateList }); </script> </body> </html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.