nette.ajax.js

Für Nette Framework

Flexibles Hilfsskript für AJAX. Unterstützt Snippets, Weiterleitungen usw.

Lizenz

MIT

Abhängigkeiten

jQuery 1.7

Installation

1. Kopieren Sie nette.ajax.js in Ihr Verzeichnis mit Javascript-Dateien (Sie können hierfür Bower verwenden).
2. Verknüpfen Sie die Datei in Ihren Vorlagen (normalerweise in app/@layout.latte , nach jQuery!).
3. Platzieren Sie irgendwo die Initialisierungsroutine:

 $ ( function ( ) {
	$ . nette . init ( ) ;
} ) ; 

Verwendung

Standardmäßig werden alle Links und Formulare mit der CSS-Klasse ajax sofort ajaxifiziert. Das Verhalten kann in der Konfiguration der init Erweiterung geändert werden. Vom Aufruf zurückgegebenes Objekt var init = $.nette.ext('init'); hat diese Requisiten:

Name	Standardwert	Beschreibung
linkSelector	a.ajax	CSS-Selektor für Links
formSelector	form.ajax	CSS-Selektor für Formulare
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	CSS-Selektor für Formularelemente, die für die Übermittlung verantwortlich sind

Die Ajaxifizierung ist an click Ereignis ( submit ) im nette Namespace gebunden. Die Ajaxifizierung eines bestimmten Links kann mit Code wie diesem abgebrochen werden (während andere Rückrufe bestehen bleiben):

 $ ( 'a.no-ajax' ) . off ( 'click.nette' ) ;

Oder noch einfacher:

 $ ( 'a.no-ajax' ) . netteAjaxOff ( ) ; 

Erweiterungen

Ajaxification umhüllt den Standardaufruf $.ajax() und erweitert ihn um mehrere Ereignisse, die mit benutzerdefinierten Rückrufen verknüpft werden können. Die Menge der zugehörigen Rückrufe wird als Erweiterung bezeichnet. Snippets-Verarbeitung, Möglichkeit, laufende Anfragen per Escape abzubrechen ... all diese Funktionen werden in Form von Erweiterungen implementiert. Die Registrierung der Erweiterung sieht folgendermaßen aus:

 $ . nette . ext ( 'name' , {
    event1 : function ( ) {
    } ,
    event2 : ...
} , {
    // ... shared context (this) of all callbacks
} ) ;

Das erste Argument ist der Name. Es ist optional.

Das zweite Argument sollte ein Hash von Rückrufen mit Schlüsseln sein, die den Namen von Ereignissen entsprechen. Diese Veranstaltungen sind verfügbar:

Name	Argumente	Beschreibung
init		Nur einmal während $.nette.init(); Anruf.
load	requestHandler	Sollte Ajaxifizierung enthalten. requestHandler kann an UI-Ereignisse gebunden werden, um eine AJAX-Anfrage zu initiieren.
before	jqXHR , settings	Wird unmittelbar vor der Ausführung der AJAX-Anfrage aufgerufen. Wenn FALSE zurückgegeben wird, wird die Anfrage nicht gestartet.
start	jqXHR , settings	Wird sofort nach dem Start der AJAX-Anfrage aufgerufen.
success	payload , status , jqXHR , settings	Wird nach erfolgreichem Abschluss der AJAX-Anfrage aufgerufen. Entspricht $.ajax( ... ).done( ... .
complete	jqXHR , status , settings	Wird nach Abschluss jeder AJAX-Anfrage aufgerufen. Entspricht $.ajax( ... ).always( ... .
error	jqXHR , status , error , settings	Wird aufgerufen, wenn die AJAX-Anfrage fehlschlägt. Entspricht $.ajax( ... ).fail( ... .

Erweiterung kann deaktiviert werden:

 $ . nette . ext ( 'name' , null ) ;

Erweiterung konfigurierbar. Sein Kontext kann erfasst werden durch:

 var context = $ . nette . ext ( 'name' ) ; 

Standarderweiterungen

Name	Beschreibung
validation	Beschränkt die Ajaxifizierung auf Klicks/Übermittlungen ohne Strg- , Alt- oder Umschalttaste , lokale Links und gültige Formularübermittlungen.
forms	Fügt Unterstützung für das Senden von Formularen mit allen Daten, dem Namen der angeklickten Schaltfläche und den Koordinaten des Klicks in [type=image] -Eingaben hinzu.
snippets	Aktualisiert das DOM nach snippets Array als Reaktion (Standard-Nette-Behandlung von Latte-Snippets).
redirect	Führt eine Weiterleitung zu einer anderen URL aus (wenn $this->redirect() im Presener aufgerufen wird). Kann durch history ersetzt werden.
unique	Lässt nur die Anforderung gleichzeitig laufen.
abort	Ermöglicht dem Benutzer, die Ausführung einer Anfrage durch Drücken von Escape abzubrechen.
init	Standard-Ajaxifizierung.

Nützliche Tricks

Für alle diese Sonderfunktionen müssen alle Standarderweiterungen aktiviert sein.

data-ajax-off

Link oder jedes andere ajaxifizierte Element kann ein benutzerdefiniertes Datenattribut data-ajax-off haben. Es enthält Namen von Erweiterungen, die für eine auf einem Element ausgelöste Ajax-Anfrage deaktiviert werden sollten.

 < a n:href =" do! " class =" ajax " data-ajax-off =" snippets " >

Sie können es auch in $.nette.ajax() verwenden. So was:

 $ . nette . ajax ( {
	url : ... ,
	off : [ 'snippets' ]
} ) ;

data-ajax-pass (in validation )

Durch die Ajaxifizierung des Elements wird sichergestellt, dass e.preventDefault() aufgerufen wird. Dieses Attribut kann dies verhindern, wenn mehr Rückrufe ausgelöst werden müssen.

data-ajax-append (in snippets -Erweiterung)

Neuer Inhalt eines Snippets mit diesem Attribut ersetzt nicht den alten Inhalt, sondern wird an diesen angehängt.

data-ajax-prepend (in snippets -Erweiterung)

Neuer Inhalt eines Snippets mit diesem Attribut ersetzt nicht den alten Inhalt, sondern wird ihm vorangestellt.

data-ajax-validate (in validation )

Das Klicken auf den Link oder das Absenden des Formulars wird unter verschiedenen Bedingungen validiert. Sie können jede davon wechseln:

 < a n:href =" do! " class =" ajax " data-ajax-validate =' {"keys":false} ' >

Und wie im Fall von data-ajax-off können Sie es direkt an $.nette.ajax() übergeben.

 $ . nette . ajax ( {
	url : ... ,
	validate : {
		keys : false
	}
} ) ;

Das bedeutet, dass durch Klicken auf den Link mit Strg kein neuer Tab geöffnet wird, sondern die Anfrage ajaxifiziert wird.

Abhängigkeit von einer anderen Erweiterung

In Ereignisrückrufen können Sie this.ext() aufrufen, um den Kontext einer anderen Erweiterung abzurufen. Wenn Sie true als zweites Argument hinzufügen, schlägt das Skript fehl, wenn diese Erweiterung nicht verfügbar ist.

 $ . nette . ext ( {
	success : function ( payload ) {
		var snippets = this . ext ( 'snippets' , true ) ;
		...
	}
} ) ;