osmer.de » doku » helpsystem

Helpsystem mit Javascript

Das Helpsystem zeigt Texte, die Bestandteile des HTML-Dokuments sind, aber auch Texte, die per Ajax aus der Server-Datenbank geholt werden.

Hilfetexte im HTML-Dokument

Diese Dateien sind erforderlich:

• img/icon_info.png
• css/ajax_getHelptext.js

Bei Klick auf ein (von mehreren) Info-Symbol wird Text gezeigt, der dem img als data-helptext zugeordnet ist.

HTML

<img id="erstes" class="help" src="img/icon_info.png" alt="info"
data-art="internerHelptext"
data-helptext="<p>id=erstes</p><p>Dies ist ein einfacher Text, der als Info angezeigt wird</p>" />

Bei Klick auf das Info-Symbol wird die Javascript Funktion getHelptextXY aufgerufen:

function getHelptextXY( host, owner_id, kw, ll, feldId, lg, x, y ) {
...
  // Hilfetexte im HTML-Dokument
  if ( document.getElementById(feldId).dataset.art == "internerHelptext" ) {
    ajax_getHelptext_helptext = document.getElementById(feldId).dataset.helptext;
    zeigeHelptext();
  }

Das Helpsystem wird nach dem Laden des HTML-Dokuments per Javascript initialisiert:

window.addEventListener('DOMContentLoaded', function ( ) {
...
});

Näheres in der zugehörigen Datei css/ajax_getHelptext.js

Hilfetexte vom Server

Diese Dateien sind erforderlich:

• img/icon_info.png
• css/ajax_getHelptext.js
• /000/p033_ajax.php
• Datenbank-Tabelle helptexte

In Projekten gibt es allgemeingültige Helptexte, etwa die Kurzbeschreibung der Programme in den Menüs und im Kopf des Programms. Es gibt mandantenabhängige Helptexte, etwa Merkmalsleisten bei Adressen. Und jeder Helptext in beliebig vielen Sprachen, wenn erforderlich.

Da ist es notwendig, Helptexte zentral zu pflegen. Etwa Informationen zu Datenfeldern, die in mehreren Programmen vorkommen. Adressen können im Stammsatz Merkmale bekommen, die in einer Liste anzugeben sind, um zu filtern. Diese Merkmale können von Administratoren geändert oder ergänzt werden und alle Programme geben dieselbe Auskunft bei Klick auf das Info-Symbol.

Derartige Helptexte werden im Moment der Anforderung per Ajax vom Server geholt. Das Programm p033_ajax.php wird mit Parametern aufgerufen, liest den Helptext aus der Datenbank und liefert ihn zurück.

Von den lokalen Info-Symbolen unterscheidet sich das datenbank-gestützte Symbol durch Fehlen der data Angaben.

HTML

<img id="gewerbeart" class="help" src="img/icon_info.png" alt="?" title="Info" />

Bei Klick wird auch hier die Javascript Funktion getHelptextXY aufgerufen, geht aber in die else:

function getHelptextXY( host, owner_id, kw, ll, feldId, lg, x, y ) {
  ...
  if ( document.getElementById(feldId).dataset.art == "internerHelptext" ) {
...
  } else {
    if ( typeof request == "undefined" ) erzeugeRequestObject();
    var url = "http://" +host +"/000/p033_ajax.php?owner_id=" +owner_id +"&kw=" +encodeURIComponent(kw) +"&ll=" +ll +"&feldname=" +feldId +"&lg=" +lg;
    if ( typeof document.getElementById( "XMLHttpRequest_gesendet" ) !== "undefined" ) {
      document.getElementById( "XMLHttpRequest_gesendet" ).innerHTML = url;
    }
    request.open('post', url, true);                // Request öffnen
    request.send(null);                             // Request senden
    request.onreadystatechange = empfangeHelptext;  // Request auswerten
  }
}

Näheres in der zugehörigen Datei css/ajax_getHelptext.js

24.06.2018   helpsystem.php