JQuery

…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).

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

Ruft runAjaxEntries auf, wenn das Dokument vollständig geladen wurde.

runAjaxEntries

Iteriert über die DIVs (rechte Spalte der Tabelle) und ruft nacheinander per AJAX das Skript „data.php“ mit dem POST-Parameter 'num' auf, dessen Wert die ID des aktuellen DIVs enthält.
Ist der Ajax-Aufruf beendet (done-Event), wir der Parameter 'msg', welche die Daten von data.php als JSON beinhaltet, unter dem Key 'msg' im DIV-Objekt gespeichert.
Der boolsche Wert 'msg.resultb' soll anzeigen, ob der Aufruf geklappt hat. Je nach dessen Wert, wird unterschiedliches im HTML des aktuellen DIVs angezeigt.
Falls der Aufruf erfolgreich war, wird die Methode runAjaxEntries rekursiv für den nächsten Eintrag aufgerufen.
Falls der Aufruf fehlschlägt wird abgebrochen.
Schließlich wird noch für das 'dblClick'-Event ein Aufruf von displayText aboniert.

displayText

Holt die gespeicherten JSON Daten wieder aus dem Object (Schlüssel 'msg')
Je nach Parameter 'mode', wird unterschliedliches angezeigt.
Es wird der aktuelle Anzeige-modus unter dem Schlüssel 'mode' als String gespeichert.

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);
 
?>