Ajax s Mootools
Řešení ajaxu pro Nette pomocí Mootools.
| Verze | 0.1 |
| Download | mootools.nette.js |
| Forum thread | zatím není |
| Autor | Happy |
| Licence | MIT |
Instalace
Stáhněte soubor mootools.nette.js a nalinkujte ho do stránky.
/**
* AJAX Nette Framework plugin for Mootools
*
* @copyright Copyright (c) 2010 Happy
* @license MIT
* @link http://addons.nette.org/cs/mootools-ajax
* @version 0.1
*/
var NetteAjax = new Class({
Extends : Request.JSON,
updateSnippet : function(id, html) {
document.id(id).set('html', html);
},
onSuccess: function(payload) {
this.parent(payload);
//redirect
if (payload.redirect) {
window.location.href = payload.redirect;
return;
}
//snippet
if (payload.snippets) {
for (var i in payload.snippets) {
this.updateSnippet(i, payload.snippets[i]);
}
}
}
});Zdrojový kód je velice jednoduchý a mělo by být na první pohled jasné, co plugin dělá.
Samotný plugin nijak neovlivňuje původní Request.JSON, pouze jej rozšiřuje. Jediné co dělá NetteAjax oproti Request.JSON navíc je, že pokud mu aplikace vrátí kód se snippety tak je automaticky aktualizuje, jinak se chová identicky jako Request.JSON. Pokud zrovna nepíšete snippety můžete klidně využívat klasického Request.JSON.
Příklad použití
Vše je stejné jako u klasického použití ajaxovací funkce z Mootools, jen místo Request.JSON píšete NetteAjax.
// new Request.JSON({
new NetteAjax({
url: {link updateMain!}
}).send();Použití v unobtrusive javascriptu
Následující kód po načtení stránky přiřadí všem SOUČASNÝM odkazům s třídou ajax po kliknutí ajaxové zpracování.
window.addEvent('domready', function() {
$$('.ajax').addEvent('click', function(event){
event.stop();
new NetteAjax({
url: this.get('href')
}).send();
});
});Pokud chcete, aby se zpracování přiřadilo SOUČASNÝM I V BUDOUCNU VZNIKLÝM odkazům s třídou ajax, je potřeba využít Element.Delegation z Mootools More.
<script type="text/javascript" src="{$basePath}/js/mootools-more.min.js">window.addEvent('domready', function() {
document.id('main').addEvent('click:relay(.ajax)', function(event) {
event.stop();
new NetteAjax({
url: this.get('href')
}).send();
});
});Mootools Event Delegation funguje tak, že není vázaný přímo na konkrétní prvky ale na prvek nadřazený, ve kterém vyhledává prvky vyhovující selektoru uvnitř relay.
Zábavné efekty s točícím kolečkem
přidám později
Slovo závěrem
- Celý kód je v podstatě jen laciná kopie pluginu Jana Marka „Ajax s jQuery“.
- Licence je tu spíš je aby byla. Pokud se vám nehodí a chcete jinou tak si ji přepište.
- Nette Rulezzz
Připojené soubory
- mootools.nette.js 831 B
