Ajax s jQuery

Řešení ajaxu pro Nette pomocí jQuery.

Verze	0.2
Download	jquery.nette.js
Forum thread	http://forum.nette.org/…-js-s-jquery
Autor	Jan Marek
Licence	MIT

Instalace

Stáhněte soubor jquery.nette.js a nalinkujte ho do stránky.

/**
 * AJAX Nette Framework plugin for jQuery
 *
 * @copyright   Copyright (c) 2009 Jan Marek
 * @license     MIT
 * @link        http://addons.nette.org/cs/jquery-ajax
 * @version     0.2
 */

jQuery.extend({
    nette: {
        updateSnippet: function (id, html) {
            $("#" + id).html(html);
        },

        success: function (payload) {
            // redirect
            if (payload.redirect) {
                window.location.href = payload.redirect;
                return;
            }

            // snippets
            if (payload.snippets) {
                for (var i in payload.snippets) {
                    jQuery.nette.updateSnippet(i, payload.snippets[i]);
                }
            }
        }
    }
});

jQuery.ajaxSetup({
    success: jQuery.nette.success,
    dataType: "json"
});

Zdrojový kód je velice jednoduchý a mělo by být na první pohled jasné, co plugin dělá.

Změny nastavení ajaxu pomocí jQuery.ajaxSetup může způsobit komplikace u některých jQuery pluginů, které očekávají výchozí hodnoty. Problematické bývá hlavně nastavení hodnoty dataType. Řešením je ji nenastavovat globálně, ale lokálně použít například $.getJSON místo volání $.get.

Příklad použití

Stačí běžné zavolání nějaké ajaxovací funkce z jQuery:

$.post("someUrl");
$.get("someUrl");

Použití v unobtrusive javascriptu

Následující kód po načtení stránky přiřadí všem současným i v budoucnu vzniklým odkazům s třídou ajax po kliknutí ajaxové zpracování.

$("a.ajax").live("click", function (event) {
    event.preventDefault();
    $.get(this.href);
});

Volání vlastního callbacku

Pokud zavoláte ajaxovací funkci z vlastní callbackem, tak se přepíše globální nette callback. Ovšem ten se dá explicitně zavolat.

$.get("someUrl", function (payload) {
    $.nette.success(payload);
    doSomethingElse();
});

Vlastní efekt pro update snippetu

Vlastní efekt při aktualizaci snippetu se zařídí přepsáním funkce $.nette.updateSnippet.

jQuery.nette.updateSnippet = function (id, html) {
    $("#" + id).fadeTo("fast", 0.01, function () {
        $(this).html(html).fadeTo("fast", 1);
    });
};

Zábavné efekty s točícím kolečkem

$(function () {
    // vhodně nastylovaný div vložím po načtení stránky
    $('<div id="ajax-spinner"></div>').appendTo("body").ajaxStop(function () {
        // a při události ajaxStop spinner schovám a nastavím mu původní pozici
        $(this).hide().css({
            position: "fixed",
            left: "50%",
            top: "50%"
        });
    }).hide();
});

// zajaxovatění odkazů provedu takto
$("a.ajax").live("click", function (event) {
    event.preventDefault();

    $.get(this.href);

    // zobrazení spinneru a nastavení jeho pozice
    $("#ajax-spinner").show().css({
        position: "absolute",
        left: event.pageX + 20,
        top: event.pageY + 40
    });
});

CSS:

#ajax-spinner {
    position:fixed;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    background: white url('../images/ajax-loader.gif') no-repeat 50% 50%;
    padding: 13px;
    border: 2px solid #CCC;
    font-size: 0;
}

Historie

20. června 2009: funkce pluginu jsou sjednoceny pod jmenný prostor $.nette

Viz také:

Ajaxové formuláře

Připojené soubory

jquery.nette.js 698 B
jquery.nette.js 698 B

Obsah