Aus Sicherheitsgründen lassen moderne Browser Ajax-Requests über Domaingrenzen hinweg nur dann zu, wenn die angefragte Resource die anfragende Domain "kennt". Ob dies der Fall ist, teilt die Resource dem Browser über den HTTP-Header Access-Control-Allow-Origin mit:

Access-Control-Allow-Origin: <origin>

Liefert die angefragte Resource diesen Header nicht oder passt <origin> nicht zur anfragenden Seite, verwirft der Browser die Response. Firefox z.B. schreibt dann die Warnung ins Console Log

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...

mit dem Zusatz

(Reason: CORS header 'Access-Control-Allow-Origin' missing)

wenn der Header fehlt, oder

(Reason: CORS header 'Access-Control-Allow-Origin' does not match '...')

wenn <origin> nicht passt.

Möchte die angefragte Resource Zugriffe von jeglichen Domains zulassen, liefert sie einfach

Access-Control-Allow-Origin: *

Möchte sie den Zugriff von mehreren (aber nicht allen) Domains zulassen, muss sie <origin> dynamisch zur jeweils anfragenden Seite setzen, die ihre Origin unter dem Header Origin: sendet.

Links

• Access-Control-Allow-Origin
• Cross-Origin Resource Sharing (CORS)

Die folgenden Diagramme zeigen Zeitreihen-Plots (am Beispiel von Umweltdaten) mit "Rangeslider" auf Basis des JavaScript Plot-Frameworks Plotly.js. Die Zeitreihen behandele ich als eine Einheit, wobei ich folgende Bedienlogik realisiert habe:

• In dem Diagramm, dessen Rangeslider aktiviert ist (siehe Checkbox am jeweiligen Diagramm), kann mit der linken Maustaste im Plot ein Zeitbereich ausgewählt und anschließend mit dem Rangeslider durch den Gesamtbereich gescrollt werden. Das Zoomen und Scrollen findet dabei über allen Diagrammen synchron statt. Bei Doppelklick in den Plot-Breich wird der ursprüngliche Zustand über allen Diagrammen wieder hergestellt.

• Mit dem Button "Scale Y Axis" kann die Y-Achse auf den Wertebereich der sichtbaren Daten skaliert werden. Dies ist nützlich, wenn in einen Zeitbereich mit geringen Wertänderungen hineingezoomt wurde. Bei einer zweiten Betätigung wird der ursprünglche Zustand der Y-Skalierung wieder hergestellt. Bei Doppelklick in irgendein Diagramm werden alle Y-Achsen gemeinsam wieder hergestellt.

• Beim Überfahren der Plots mit der Maus wird das Koordinatenpaar des nächstgelegenen Punktes angezeigt.

• Im Menü "Shape" kann die Kurvendarstellung eingestellt werden. Spline: Die Messwerte werden durch eine Spline-Approximation verbunden. Linear: Die Messwerte werden durch eine gerade Linie verbunden. Marker: Die Messwerte werden nicht verbunden, sondern durch einen Punkt dargestellt. Quality: Wie Marker, nur dass in der Farbe des Punktes eine dritte Dimension (hier: die Qualität des Messwerts) kodiert ist.

• Mittels des Buttons "Download as PNG" kann das Diagramm als Grafik heruntergeladen werden. Soll er Rangeslider darauf nicht erscheinen, bietet es sich an, diesen vorher wegzuschalten.

• Die geplotteten Daten sind nicht Teil der HTML-Seite (!), sondern werden per Ajax-Request von einer anderen Site via Cross-Origin Resource Sharing asynchron geladen.

• Sonderfall "Keine Daten": Das letzte Diagramm (GlobalRadiation) zeigt die Darstellung, wenn im gegebenen Zeitbereich keine Daten vorliegen.

Header mit beliebigem Inhalt:

Header am Seitenanfang fixieren:

Am Seitenanfang Platz für den fixierten Header reservieren:

Demo:

• https://jsfiddle.net/s31tz/tdboLrLz/

Die jQuery UI Widgets Tabs und Accordion könnten - bis auf die Ausrichtung ihrer Reiter (Tabs horizontal, Accordion vertikal) - identisch sein. Sind sie aber nicht. Während das Tabs-Widget das Laden von Inhalten per Ajax direkt unterstützt, ist dies beim Accordion-Widget nicht vorgesehen. Es ist jedoch möglich, dies durch einen beforeActivate Event-Handler und bestimmte Einstellungen zu realisieren.

Struktur des Accordion

<div id="ID">
  <h3><a href="URL">TITLE</a></h3>
  <div></div>
  ...
</div>

ID ist die DOM-Id des Accordion. Der TITLE des Reiters wird in einen a-Tag eingefasst, dessen href-Attribut den URL definiert, von dem wir den Inhalt des Accordion-Panel per Ajax abrufen. Der div-Container für den Panel-Content ist leer, dieser wird per Ajax gefüllt.

Instanziierung des Accordion

$('#ID').accordion({
  beforeActivate: function (event,ui) {
    var url = ui.newHeader.find('a').attr('href');
    if (url)
      ui.newPanel.load(url);
  },
  active: false,
  collapsible: true,
  heightStyle: 'content'
});

Das Laden des Panel-Inhalts per Ajax realisiert der beforeActivate-Handler, den wir bei der Instanziierung des Accordion-Widget definieren (Zeilen 2-6). Wir nutzen den beforeActivate-Handler und nicht den activate-Handler, da er vor dem Öffnen des Reiters gerufen wird. D.h. zum Zeitpunkt des Öffnens ist der Inhalt bereits geladen, was einen flüssigen Ablauf ergibt.

Die Setzungen

active: false
collapsible: true

bewirken in dieser Kombination, dass zunächst alle Reiter geschlossen bleiben, denn das initiale Öffnen feuert nicht die beforeActivate- und activate-Events. Das initiale Öffnen realisieren wir durch das Auslösen eines Click-Event nach der Accordion-Instanziierung (s.u.).

Die Setzung

heightStyle: 'content'

bewirkt, dass die Höhe des Panel automatisch an den geladenen Inhalt angepasst wird. Dies ist wichtig, da der Inhalt vorab nicht bekannt ist.

Öffnen des ersten Accordion-Reiters

$('#ID a:first').trigger('click');

Den ersten Accordion-Reiter öffnen wir durch das Auslösen eines Click-Event, so als hätte der Anwender auf den ersten Reiter geklickt. Auf diese Weise ist sichergestellt, dass der beforeActivate-Handler gerufen und damit der Inhalt geladen wird.

Links:

• jQuery UI
• Accordion Demo
• Accordion API

Mit der Class Option hover kann beim jQuery Plug-In DataTables eingestellt werden, dass die Tabellen-Zeile unter der Maus hervorgehoben wird. Leider ist die Hervorhebung so schwach, dass sie in Kombination mit Class Option stripe auf den dunkleren Zeilen kaum sichtbar ist.

Hier der CSS-Code, mit dem sich die Hover-Farbe ändern lässt:

#ID.dataTable.hover tbody tr:hover,
#ID.dataTable.display tbody tr:hover {
    background-color: COLOR;
}

Hierbei ist ID die DOM-Id der Tabelle und COLOR die gewünschte Farbe. Die Hover-Farbe ist per Default auf das sehr helle Grau #f6f6f6 eingestellt. Wählt man z.B. das dunklere #e8e8e8, ist die Hervorhebung deutlich erkennbar.

Soll die Hover-Farbe für alle DataTables gelten:

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: COLOR;
}

Links

• DataTables
• Class Options
• jQuery

Ein leistungsfähiges jQuery Plug-In für Tabellen ist DataTables. Es kann in vielfältiger Weise konfiguriert werden. Einige Anpassungen im Zusammenhang mit dem Filter-Suchfeld sind allerdings schlecht dokumentiert. Das Filter-Suchfeld ist per Default mit dem Label-Text "Search:" beschriftet und befindet sich rechts über der Tabelle. Hier eine kurze Beschreibung, wie dieses Setup geändert werden kann. Im folgenden Code stehen ID, LABEL und WIDTH für die frei wählbaren Angaben DOM-Id der Tabelle, Label-Text und CSS-Breite.

Label-Text setzen (JS):

$('#ID').DataTable({
    ...
    'language': {
        'search': 'LABEL'
    }
});

Suchfeld links positionieren (CSS):

#ID_filter {
    float: left;
}

Suchfeld mittig positionieren (CSS):

#ID_filter {
    width: 100%;
    text-align: center;
}

Größe des Suchfelds ändern (CSS):

#ID_filter input[type="search"] {
    width: WIDTH;
}

Eigenes Suchfeld definieren:

<input type="text" id="searchField" ...>

$('#searchField').on('keyup',function () {
    tab.search(this.value).draw();
});

Das von DataTables erzeugte Suchfeld unterdrücken:

$('#ID').DataTable({
    dom: 't', // nur die Tabelle selbst, ohne Suchfeld etc.
    ...
});

Links

• DataTables
• jQuery

Serverseitig via HTML

Wenn serverseitig kein Zugriff auf die Header der HTTP-Antwort besteht, kann ein Cookie auch per HTML gesetzt werden:

Zustand eines Select-Menü (per CGI.pm generiert) sichern

Ein onchange-Handler setzt einen Cookie, der den Zustand eines Select-Menü anwendungsglobal speichert (Perl/CGI.pm):

Ein HTML-Formular soll mittels Abbruch-Button beendet werden, d.h. der Button soll die Formulardaten nicht abschicken, sondern auf eine andere Seite URL verzweigen, z.B. die Seite, von der aus das Formular aufgerufen wurde.

Implementierung:

<input type="button" value="Abbrechen" onclick="location.href = 'URL'">

1. Der Button ist ein einfacher Button (type="button"), kein Submit-Button, d.h. eine Formularaction wird durch den Button nicht ausgelöst.

2. Die Folgeseite URL wird durch Zuweisung an das href-Attribut des location-Objekts geladen.