Kategorie: jQuery

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: Simple Table Builder

Simple Table Builder ist eine PHP Klasse, mit der sich HTML-Tabellen auf Grundlage eines mehrdimensionalen Arrays erzeugen lassen. Um die Usability zu verbessern wurde das jQuery-Plugin „Flexigrid“ (http://flexigrid.info) verwendet.

Features:

  • Titel-Text
  • Definition der Spaltenüberschriften
  • Höhe und Breite der Tabelle festlegen
  • Spaltensortierung
  • Definition der Spaltenbreite
  • Festlegen einer Standard-Spaltenbreite

    • Screenshot:

    Anwendungsbeispiel:

    require_once('SimpleTableBuilder.php');

    $aTableData = array_fill(0, 15, array('Vorname' => 'Max', 'Nachname' => 'Mustermann', 'Straße' => utf8_decode('Musterstraße 10')));
    $oSimpleTableBuilder = new SimpleTableBuilder();
    $oSimpleTableBuilder->setHeader('Vorname', array('Nachname' => '150'), utf8_decode('Straße')); //Die Breite einer Spalte kann über ein Array definiert werden (In diesem Fall: 150 Pixel). Ansonsten wird der Standardwert verwendet.
    $oSimpleTableBuilder->setTitle('Mein Array');       //Festlegen der Tabellen-Überschrift (optional)
    $oSimpleTableBuilder->setTableData($aTableData);    //Hier wird das Array übergeben, aus dem eine Tabelle erzeugt wird.
    $oSimpleTableBuilder->setHeight('300');             //Festlegen der Höhe (optional)
    $oSimpleTableBuilder->setWidth('600');              //Festlegen der Breite (optional)
    echo $oSimpleTableBuilder->buildTable();            //Tabelle erzeugen

    PHP: Simple Table Builder weiterlesen

    Alternierende Hintergrundfarbe in einer Tabelle mit jQuery

    Mit jQuery lässt sich eine Tabelle mit zeilenweise alternierender Hintergrundfarbe sehr einfach implementieren. Mit dem folgenden Code muss lediglich die Style-Klasse „alternating_row“ festgelegt werden:

    Beispiel:

    jQuery-Code:

    $(document).ready(function()
    {
      $("table.alternating_row tr:even").css("background-color", "#EBDDE2");
      $("table.alternating_row tr:odd").css("background-color", "#C8BBBE");
    });

    HTML-Code:

    <table class="alternating_row">
        <tr>
            <th>Spalte 1</th>
            <th>Spalte 2</th>
            <th>Spalte 3</th>
            <th>Spalte 4</th>
        </tr>
        <tr>
            <td>Eintrag 1</td>
            <td>Eintrag 1</td>
            <td>Eintrag 1</td>
            <td>Eintrag 1</td>
        </tr>
        <tr>
            <td>Eintrag 2</td>
            <td>Eintrag 2</td>
            <td>Eintrag 2</td>
            <td>Eintrag 2</td>
        </tr>
        <tr>
            <td>Eintrag 3</td>
            <td>Eintrag 3</td>
            <td>Eintrag 3</td>
            <td>Eintrag 3</td>
        </tr>
        <tr>
            <td>Eintrag 4</td>
            <td>Eintrag 4</td>
            <td>Eintrag 4</td>
            <td>Eintrag 4</td>
        </tr>
    </table>

    jQuery Select2 3.1 Plugin

    Select2 3.1 ist ein jQuery Plugin (siehe http://ivaynberg.github.com/select2/) mit dem die Usability und Optik von Auswahlfeldern deutlich verbessert werden kann. Das Schöne an diesem Plugin ist, dass man als Entwickler mit wenig Aufwand mächtige Funktionen in Auswahl-Felder integrieren kann. Wie z.B.:

      • Text-Suche mit autosuggest
      • facebook-artige Mehrfachauswahl
      • Nachladen von Daten per Ajax

    Zwei Beispiele, wie soetwas aussehen kann:

    Code:

        <script>
        $(document).ready(function()
        {
            $("#select1").select2();
            $("#select2").select2();
        });
        </script>


    Links:
    Demo | Select2 3.1 Homepage