Impressum![]() Frank Seitz Hauptstr. 32 25462 Rellingen E-Mail: fs ![]() Tel.: +49-176-78243503 ![]() Alle Artikel Inhaltsverzeichnis Rechtliche Hinweise Code auf GitHub Code auf meta::cpan KategorienAbonnieren |
Donnerstag, 12. November 2020Ajax: Cross-Origin Resource Sharing (CORS) implementierenAus 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. LinksMontag, 9. November 2020Plotly.js: Plotten und analysieren einer Gruppe von ZeitreihenDie 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:
Dienstag, 26. April 2016CSS: Header beliebiger Höhe am oberen Seitenrand fixierenHeader mit beliebigem Inhalt:
Header am Seitenanfang fixieren:
Am Seitenanfang Platz für den fixierten Header reservieren:
Demo: Sonntag, 24. April 2016jQuery UI: Accordion Panels per Ajax ladenDie 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: Montag, 21. März 2016DataTables: Hover Color definierenMit 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; } LinksMittwoch, 16. März 2016DataTables: Filter-Suchfeld positionieren und gestaltenEin 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.
...
});
LinksDienstag, 4. Juni 2013JavaScript: Existenz eines Bildes prüfenvar img = new Image(); img.onload = function () { // Bild existiert }; img.onerror = function () { // Bild existiert nicht }; img.src = URL; Donnerstag, 28. Oktober 2010Cookies per JavaScript setzenServerseitig via HTMLWenn 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) sichernEin onchange-Handler setzt einen Cookie, der den Zustand eines Select-Menü anwendungsglobal speichert (Perl/CGI.pm):
Dienstag, 26. Oktober 2010Javascript: HTML-Formular abbrechenEin 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'">
(Seite 1 von 1, insgesamt 9 Einträge)
|
Kalender
StatistikLetzter Artikel:
28.05.2023 15:05 155 Artikel insgesamt
Links
|