Inhaltsverzeichnis

JQuery

Fortschrittstabelle

Sinn und Zweck

…hiervon ist es, eine Tabelle zu erstellen, deren Einträge per Ajax im Hintergrund abgeholt werden und deren Status dargestellt wird.
Zusätzlich wird noch graphisch angezeigt welcher Eintrag aktuell verarbeitet wird (mittels Aktivitätskringel).

Beispiel

Siehe hier.

HTML/Javascript

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>          
<script type="text/javascript">                                         
  /**Goes through all divs with numeric id and calls data.php with post parameter num: id.
   * @param id: Numeric id of div (e.g. <div id=1...)
   * @param maxId: Last id to increment to (non-inclusive)
   */
  function runAjaxEntries(id, maxId) {
    $("#"+id).html("<center><img src=busy.gif></img></center>");
 
    $.ajax({
      url: "data.php",
      type: "POST",
      data: {'num': id},
      dataType: "json",
      }).done(function( msg ) {
        var curObj = $("#" + id);
        curObj.data('msg', msg);
        if(msg.resultb) {
          displayText(curObj, "short");
          if(id+1<maxId) {
            runAjaxEntries(id+1,maxId);
          }
        } else {
          curObj.html('Failed!!!');
        }
        $("#"+id).dblclick(function() {
          displayText(curObj, "toggle");
        });
      });
  }
 
  /**Displays text with different modes.
   * Data is stored inside obj under the key 'msg'.
   * The stored data is the complete json data sent by data.php.
   * @param obj: The object (div element) whose html content should be altered.
   * @param mode: One of 
   *              'short': Display short message text.
   *              'long': Display short and long message text; last in textarea.
   *              'toggle': Switch between short and long mode.
   */
  function displayText(obj, mode) {
    var msg = obj.data('msg');
    switch(mode) {
      case "short":
        obj.html(msg.result);
        obj.data('mode', mode);
        break;
      case "long":
        obj.html(msg.result + "<p><textarea>" + msg.console + "</textarea>");
        obj.data('mode', mode);
        break;  
      case "toggle":
        switch(obj.data('mode')) {
          case "short":
            displayText(obj, "long");
          break;
          case "long":
            displayText(obj, "short");
          break;
        }
        break;
    }
  }
 
  /**Main hook function:
   * Execute everything when document is ready.
   */
  $(document).ready(function() {
    runAjaxEntries(1,5);
  });
 
  // we will add our javascript code here                                     
</script>                                                               
</head>                                                                 
<body>                                                                  
  <table border="1">
    <tr><th>Description</th><th>Result</th></tr>
    <tr><td>One</td><td><div id="1"</td></tr>
    <tr><td>Two</td><td><div id="2"</td></tr>
    <tr><td>Three</td><td><div id="3"</td></tr>
    <tr><td>Four</td><td><div id="4"</td></tr>
  </table>
</body>                                                                 
</html>

Hierbei handelt es sich um eine html Seite bestehend aus einer Tabelle und Javascript.
Der Javascript-Einsprungspunkt ist das $(document).ready Event.

$(document).ready
runAjaxEntries
displayText

PHP

<?php
 
$return = array();
 
sleep(1);
switch($_POST['num']) {
  case '1':
    $return['resultb'] = true;
    $return['result'] = "first case";
    $return['console'] = "The first console entry";
    break;
  case '2':
    $return['resultb'] = true;
    $return['result'] = "second case";
    $return['console'] = "The second console entry";
    break;
  case '3':
    $return['resultb'] = true;
    $return['result'] = "third case";
    $return['console'] = "The third console entry";
    break;
  case '4':
    $return['resultb'] = true;
    $return['result'] = "fourth case";
    $return['console'] = "The fourth console entry";
    break;
  default:
    $return['resultb'] = false;
    $return['result'] = "Not implemented";
    $return['console'] = "";
}
 
echo json_encode($return);
 
?>

Dieses PHP-Skript erfüllt folgende Aufgaben:

Links