topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

basic-ajax-12-index.php / php



  <?php
  
      require_once('connect.php');
      require_once('tasks.php');
   
      if (!dbConnect()) {
          echo 'Unable to establish database connection';
          exit;
      }
   
      tasks = getTasks();
  ?>
  <!DOCTYPE html PUBLIC "-//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_id => task) { ?>
                  <li id="task_<?= task_id ?>"><?= 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>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.