Tutorials von Thomas Frei-Herrmann

Tutorial Formular-Auswahl anzeigen mit jQuery und Ajax Skript sowie SQLite Datenbank - vielen Dank an Klaus2 für dieses Skript

Dieses Tutorial ist nur für fortgeschrittene User geeignet und die Verwendung der Skripte sowie der Nachbau natürlich auf eigene Gefahr.

Zunächst habe ich mir ein ganz normales Formular mit den Formular-Werkzeugen von NOF erstellt.

Ich habe mein Auswahlfeld erstellt. Bitte achtet auf den “Wert”, den ich mit Zahlen nummeriert habe, um im Skript auf diese ID zuzugreifen.

Bitte achtet auf die ID dieses Auswahlfeldes. Hier habe ich die von NOF automatisch vergebene ID so belassen,

die hier “FormsComboBox1” heißt.

Jetzt müsst Ihr noch die Verlinkung zu der jQuery Datei in den Head der Formular-Seite einfügen. Hierfür könnt Ihr den Link unten verwenden, der “Zwischen Head Tags” der Layout-HTML gehört.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Solltet Ihr, so wie ich es hier getan habe, als HTML-Ausgabe XHTML verwenden, dann ist es am einfachsten für diese jQuery Datei die Komponente “ReplaceJquery” von SwissKnife for NOF zu verwenden.

Nun habe ich mir unterhalb des Formulars ein Textfeld aufgezogen, um das eigentliche jQuery-Ajax-Skript im HTML-Code Editor des Textfeldes einzutragen.

> Textfeld doppelklicken (Cursor blink) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

Achtet dabei ganz genau auf die ID des Auswahlfeldes, die ich oben vergeben habe und den DIV-Container.

<script type="text/javascript">
   $.ajaxSetup({cache:false});
   function DIV1_aendern() {
      var Auswahl_Wert = $("#FormsComboBox1").val();
      var DatenURL = "./Daten.php?ID=" + Auswahl_Wert;
      $.get(DatenURL,
      function(InfoDaten)
      {
         $('#DIV1').html(InfoDaten.Infos);
      }, "json");
   }
   $("#FormsComboBox1").change(DIV1_aendern);
   DIV1_aendern();
</script>

Zur Anzeige der Auswahl habe ich dann noch ein Textfeld aufgezogen und diesem im HTML-Code Editor die ID “DIV1” gegeben.

Dieser Text würde erscheinen “JavaScript nicht verfügbar” falls JavaScript im Browser deaktiviert oder das Skript nicht ausführbar sein sollte, ansonsten erscheint dort der Inhalt des Feldes aus der Datenbank.

<div id="DIV1">JavaScript nicht verfügbar</div>

SQLite Datenbank

Dieses Skript verwendet eine SQLite-Datenbank, in der sich die Ausgabedaten auf die in dem Auswahlfeld eingetragenen IDs beziehen.

Bitte guckt Euch zu SQLite auch mein Tutorial hier mal an.

• Hier könnt Ihr Euch meine Skripte und meine SQLite-Datenbank downloaden. Downloads insgesamt seit dem 14.11.2012: 1641 

Entpackt die ZIP Datei. Im Ordner “SQLite-Dateien” findet Ihr alle benötigten Dateien, sowie meine Beispiel-Datenbank.

Ich habe die Dateien wie folgt angeordnet:

• html - der Inhalt dieses Verzeichnisses und das Verzeichnis “drivers” gehören in das Verzeichnis “html”
   
• SQLiteDB - dieses Verzeichnis komplett in das “Stammverzeichnis” des Projektes kopieren.
  Es beinhaltet meine Beispiel-Datenbank “InfosDB.sdb” und eine .htaccess Datei zum Schutz dieses Verzeichnisses.

Um diese Datenbank einsehen und bearbeiten zu können oder auch eine neue Datenbank zu erstellen, benötigt Ihr eine Software wie z.B. den “SQLite Administrator”, die Ihr Euch dort downloaden müsst.

Hier noch eine Ansicht der Tabelle “Infos” meiner SQLite-Datenbank.

... und hier noch als Beispiel die drei Einträge in die Felder mit ihrer Formatierung:

Aus Sicherheitsgründen habe ich in der Datei “Daten.php” noch eine IF-Bedingung eingebaut (hier für meine 3 IDs), die auf die vorhandenen Datensätze prüft. Bei Bedarf müsstet Ihr diese Anzahl auf Eure Datensätze abändern.

<?php
   require_once('./adodb.inc.php');
   $ID=$_GET['ID'];
   $ID=intval($ID);
   $InfoDaten['Infos'] = 'Falsche ID';
  
   // Anzahl der Datensätze in der SQLite - hier 3 IDs
   if(($ID>=1) && ($ID<=3))
   {
      $db = NewADOConnection('sqlite');
      $db->Connect('../SQLiteDB/InfosDB.sdb');
      $sql = 'SELECT Info FROM Infos WHERE ID=' . $ID;
      $rs = $db->Execute($sql);
      $infos = $rs->GetRows();
      $info = $infos[0][0];
      $InfoUTF8 = mb_convert_encoding($info, "UTF-8", "ISO-8859-1");
      $InfoDaten['Infos'] = "$InfoUTF8";
   }
   echo json_encode($InfoDaten);
?>

nach oben

Viel Erfolg!