Kategorie: JavaScript

jQuery: Summen in einer Tabelle spaltenweise ausrechnen

Diese JavaScript-Funktion rechnet die Summen für alle Spalten einer Tabelle aus. Es können beliebig viele Spalten und Zeilen hinzugefügt werden.

JavaScript:

function calcSum(sTableID)
{
    $('#'+sTableID+' thead th').each(function(iIndex)
    {
        var iSum = 0;
        $('#'+sTableID+' tbody tr').each(function()
        {
            var iValue = parseInt($('td', this).eq(iIndex).text());
            if (!isNaN(iValue))
            iSum += iValue;
        });
        $('#'+sTableID+' tfoot td').eq(iIndex).append(iSum)
    });
}

jQuery: Summen in einer Tabelle spaltenweise ausrechnen weiterlesen

JavaScript: Mehrere Wörter in einem String ersetzen

Diese JavaScript-Funktion ersetzt alle Wörter in dem String (str) mit den im Parameter „dictionary“ festgelegten Werten. Möglich wird das durch den Aufruf einer Callback-Funktion mit dem auf das Suchmuster (\w+) passenden Wert. In diesem Fall werden nur alphanumerische Wörter beachtet. Dieses Verhalten kann aber beliebig über den verwendeten regulären Ausdruck angepasst werden.

Code:

function dictionaryReplace(str, dictionary)
{
    return str.replace(/\w+/g,
    function(regex_match)
    {
        return dictionary[regex_match] || regex_match;
    })
}

JavaScript: Mehrere Wörter in einem String ersetzen weiterlesen

Versehentlichen Datenverlust in HTML-Formularen verhindern

Dieser jQuery-Code verhindert, dass ein Benutzer versehentlich seine mühsam eingegeben Daten, durch einen unachtsamen Klick auf einen Link oder durch eine falsche Tastenkombination, verliert.
In diesem Beispiel werden nach dem Laden der Seite alle Formular-Werte per Serialisierung in der Variable „serialized_values“ gespeichert. Sobald jetzt ein Unload-Event ausgelöst wird, muss der Benutzer bestätigen, dass er die aktuelle Seite tatsächlich verlassen möchte. Der Dialog wird nur angezeigt, wenn sich auch tatsächlich Daten verändert haben.

var serialized_values = "";

$(document).ready(function()
{  
  serialized_values = $("form").serialize();  
});

window.onbeforeunload = confirmLeave;

function confirmLeave()
{
    if(serialized_values != $("form").serialize())
    {
        return unescape("Nicht gespeicherte Informationen gehen m%F6glicherweise verloren.");
    }      
}

Um die Bestätigung für einzelne Elemente (z.B. Submit-Buttons) zu deaktivieren, reicht es den Event-Handler auf null zu setzten.

<button type="submit" onclick="window.onbeforeunload = null">Formular speichern</button>

Cross-Domain Requests (XDR) mit JavaScript / jQuery

Folgende Problematik: Möchte man bestimmte Informationen einer fremden Webseite mit JavaScript auslesen, dann ist man gezwungen Workarrounds anzuwenden. Eine Möglichkeit ist, ein kleines PHP-Skript als Proxy einzusetzen, um an die gewünschten Daten zu kommen.
Cross-Domain Requests (XDR) mit JavaScript / jQuery weiterlesen

PHP: Event-Driven Programming mit WAMP (WebSockets)

Das WebSocket Application Messaging Protocol ist ein Protokoll welches WebSockets nutzt um Funktionen wie RPC (Remote Procedure Call) und PubSub (Publish & Subscribe) anzubieten. Intern werden die Nutzdaten mit Hilfe von JSON transportiert. Mittlerweile existieren einige Implementierungen um WAMP (http://wamp.ws) einzusetzen. Für PHP gibt es z.B. Ratchet: (http://socketo.me) . Ratchet ist eine lose gekoppelte Bibliothek, die einem Entwickler die Möglichkeit gibt, eine bi-direktionale Echtzeitkommunikation zwischen Client und Server in PHP umzusetzen. Als Gegenstück für den Server kann die JavaScript-Bibliothek Autobahn (http://autobahn.ws/js) verwendet werden.

Vorraussetzungen für die Beispielimplementierung:

  • PHP 5.4 Interpreter (idealerweise XAMPP auf Laufwerk C:)
  • Browser mit WebSocket-Support

    • Features:

  • An Topic anmelden / abmelden
  • Nachricht versenden / empfangen
  • Remote Procedure Call
  • Über WebSockets bewegliches DIV

    • Screenshot Client:
    WAMP Beispielimplementierung Client
    Screenshot Server:
    WAMP Beispielimplementierung Server

    PHP: Event-Driven Programming mit WAMP (WebSockets) weiterlesen