nette.ajax.js – alt. obsluha pro AJAX s jQuery

Všiml jsem si pull requestu na podporu History API. Můžu se zeptat v jakém je to stádiu? Je to funkční nebo zatím jen prototyp?

Před časem jsem si něco podobného splácal sám, ale moc spokojený s tím nejsem. Kromě obsluhy history ale potřebuji mít možnost navázat na dokončení popstate eventu vlastní obsluhu (tj. snippety se obnoví na předchozí hodnoty a já s nimi chci ještě manipulovat). To zmiňuju jen pokud by taková možnost nebyla, takový lehký feature request :-)

Dakujem za pomoc :) Ale problem je, ze napriek tomu ze mi vyskoci confirm dialog, ajax sa spracuje, aj ked confirm zamietnem :/

<script type="text/javascript">
// the easiest way to open debugger bluescreen in browser (local filesystems only)
$(function() {
        $.nette.ext({
		error: function(request) {
            		window.open(request.getResponseHeader('X-Nette-Error-Log'));
        	}
	});
});
</script>

to je skvela funkce :)

podivej se jestli je ta hlavicka v te odpovedi

Editoval pekelnik (19. 9. 2012 19:16)

Je třeba nemít Firelogger. Pokud je zapnutý, tak Nette tuto hlavičku bohužel neposílá.

Editoval vojtech.dobes (19. 9. 2012 19:34)

O jakou vyjímku/chybu v jaké fázi aplikace jde? Při vykreslování se už také neodešle.

Nechceš poslat klikatelnou laděnku? V handleru jako ve zpracování signálu, jo?

Mozna by nebylo od veci posilat tu hlavicku v development modu vzdycky.

pepakriz napsal(a):
Případně dá se nějak ovlivnit pořadí extenzí?

Obávám se, že aspoň moje (asi 3 týdny stará verze) to neumožňuje. Pokud potřebuješ, aby se Tvá extenze provedla až nakonec (což byl můj případ), můžeš v příslušném handleru použít

setTimeout (function() { ... }, 0);

ale moc čisté řešení to není (co kdyby tohle dělaly nezávisle na sobě dvě extenze, mezi kterými bys potřeboval určit pořadí…).

Ahoj pánové,

před časem jsem tady psal o myšlence propojení zde probíraného ajaxového rozšíření s modálními formuláři, které umí vyrobit jquery UI. Před několika dny jsem se dostal k celkem funkčnímu kódu, tak ho dávám k dobru a třeba se bude někomu hodit nebo mi napíše, jak by se to nechalo udělat lépe.

Tady je odkaz: http://pastebin.com/wPnybT9v

A ještě nějaký krátký popis:

Jedná se o 3 extenze (dialogy vyžadují ty dvě zbývající):

• extrapost – vyrobí metody $.nette.post a $.nette.get, které funkčně odpovídají

  klasickým $.post a $.get, ale navíc volají i handlery všech zbylých extenzí. Je

  to spíš jenom usnadnění pro toho, kdo není zvyklý na metodu ajax.

• watchdog – přidává metodu $.nette.watchSnippet(name, callback), která umožňuje

  přidat sledování určitého snippetu. Pokud pošle server novou verzi snippetu, zavolá se

  daný callback. To se hodí pokud máte navěšené nějaké události na vnitřku snippetu. Pokud

  nová verze snippetu, je potřeba znovu navěsit tyto události a k tomu používám zmíněnou

  metodu.

• dialogs – umožňuje poměrně snadno vyrobit z normální aplikace ajaxovou pomocí

  modálních oken. Výchozím stavem je funkční neajaxová aplikace, dejme tomu telefonní

  seznam. Při editaci jména nás Nette přesměruje na novou stránku s formulářem, který

  vyplníme, a pak nás hodí zase zpátky na seznam. Pokud chceme, aby probíhala editace

  jména v modálním okně, uděláme následující:

• Nalinkovat jQuery UI + pohrát si se styly
• Editační formulář vložíme do snippetu a také tabulku s telefonním seznamem dáme do

  snippetu:

{snippet renameFormSnippet}
  {control renameForm}
{/snippet}

{snippet phoneBookSnippet}
  <table> ... </table>
{/snippet}

• V presenteru přidáme do akce edit následující. Díky tomu nám přijde na ajaxový

  požadavek místo celé stránky jenom snippet s formulářem.

if ($this->isAjax()) {
  $this->invalidateControl("renameFormSnippet");
}

• Upravíme událost renameFormSubmitted tak, že místo přesměrování zavoláme metodu

  podobnou té níže. Pokud se nejedná o ajaxový požadavek, proběhne obyčejné

  přesměrování. V opačném případě se zavolá výchozí akce, která naplní šablonu,

  a invaliduje se snippet s tabulkou jmen. Do payloadu se ještě přidá příznak

  dialogs["all"] = "close", který říká javascriptové části, že má zavřít všechna okna

  (místo all můžeme použít název snippetu, který okno obsahuje). Výsledkem ajaxového

  požadavku je tak opět json odpověď s novou verzí tabulky.

private function redirectOrAjax()
{
  // Redirect if this is not ajax call:
  if (!$this->isAjax()) {
    $this->redirect('default');
  } else {
    $this->actionDefault();
    $this->template->setFile($this->getContext()->params['appDir'] . '/templates/Homepage/default.latte');
    // Invalidate necessary snippets:
    $this->invalidateControl('phoneBookSnippet');
    $this->payload->dialogs["all"] = "close";
  }
}

• Příslušným odkazům vedoucím na editační formulář přidáme událost onclick,

  ve které zavoláme metodu $.nette.showDialog(url, snippet, args, options).

  Snippet je jméno snippetu, který obsahuje editační formulář, args jsou

  parametry, které se předají v POSTu, options je objekt, který obsahuje

  konfiguraci jquery dialogu (viz nápověda k jquery ui). Může to vypadat třeba

  takto:

<a href="..." onclick="$.nette.showDialog({link //edit $person_id}, 'renameFormSnippet', {}, { width: 600 }); return false;">Upravit</a>

S trochou štěstí by se po kliknutí na editační odkaz měl objevit hezký modální formulář. Pokud nebude povolený javascript, aplikace se bude chovat jako dříve.

Snad se bude tohle rozšíření někomu hodit. Pokud ne, tak se omlouvám za spam a přeju hezký večer.

Honza

Editoval klasyc (20. 9. 2012 22:02)

LeonardoCA Mrknu na to, kompatibilita s Bootstrapem je moc hezká feature :).

Zdravím, včera jsem aktualizoval z masteru a přestal mi fungovat košík. $_POST hodnoty se vůbec nevyplnily a firebug ukazoval request na správnou adresu a vracel 200 OK. Udělal jsem downgrade a vše funguje. Něco se někde musí nově nastavit?

Editoval h4kuna (24. 9. 2012 10:04)

vojtech.dobes napsal(a):

Zatím jsem přidal podporu pro dropdowny – v téhle větvi přibyla extenze twitterBootstrap (v samostatném souboru). Ta se o vše automaticky postará.

Zítra mrknu na ostatní Bootstrapové komponenty, jestli to nějak potřebují, a snad se to brzy dostane do stabilní verze.

Díky, jak bude čas tak to vyzkouším, případně rozšířím, teď pár dnů asi moc nebude.

LeonardoCA Kdyžtak otevírej issuečka, bylo by to supr. Rád vedu diskuse na Githubu :).

Konkrétně k tomuto, nevím jestli nestačí, aby si to každý pohlídal sám… jak přesně se to chová s tou zapnutou cachí? PJAX to kupříkladu automaticky nenastavuje.

vojtech.dobes napsal(a):

@h4kuna Refaktoring API zanesl do kódu chybu, kdy se formulářová data zpracovala až po odeslání requestu. Fixed.

skoro mi přijde že se fix ještě nedostal na https://github.com/…ette.ajax.js

@motorcb This way :)

$.nette.ext('snippets').applySnippet = function ($el, html) {
	$el.fadeTo("fast", 0.01, function () {
		$el.html(html).fadeTo("fast", 1);
	});
};

@vojtech.dobes: Díky, fadeTo funguje bezvadně :)
Mohl by ses prosím kouknout na ten Multiplier

Editoval motorcb (27. 9. 2012 9:16)

@motorcb To je složitější – klient neví, které snippety pošle server k obnovení. Můžeš si napsat vlastní rozšíření, snippetové kontejnery najdeš pomocí tohoto selektoru:

[id^="snippet--"]

motorcb Myslíš třeba linku, na který bylo kliknuto? Jo. V poslední stabilní verzi takto:

$.nette.ext('my-ext', {
	before: function (settings) {
		if (settings.nette) {
			var id = settings.nette.el.attr('id');
		}
	}
});

Update: omlouvám se, autor skriptu neví, jak ho používat :). Tento kód nemůže fungovat na žádné verzi.

Editoval vojtech.dobes (2. 10. 2012 18:31)

Ty callbacky volá samotné nette.ajax.js, přičemž s těmito parametry. Volal jsi to na poslední stabilní verzi? Na masteru musí být to settings až druhý argument.

Máš skutečně 1.1.2? Protože v ní tento kód nebude fungovat. Události before se předává pouze jqXHR objekt. Tento kód ti nebude fungovat na žádné verzi, ale pokud posuneš ten parametr settings na druhou pozici, tak ti fungovat bude na masteru.

Omlouvám se, před tím jsem mystifikoval, příspěvek jsem doplnil.

Editoval vojtech.dobes (2. 10. 2012 18:31)

Ano, použij verzi z masteru (poslední stabilní verze je z tagu 1.1.2, tedy tato). A použij tento kód:

(function($, undefined) {

$.nette.ext('my-ext', {
    before: function (xhr, settings) {
        alert("xxx");
        if (settings.nette) {
            var id = settings.nette.el.attr('id');
            alert( id );
        }
    }
});

})(jQuery);

Změnily se parametry, které jsou tomuhle callbacku předávány, dříve se settings vůbec nepředávalo, jen xhr.

Zdravím,
pokud se zde něco takového již řešilo, tak se omlouvám, ale nic jsem nenašel.
Asi jsem správně nepochopil jak se používají extensions.

Dejme tomu, že mám na stránce několik ajaxových odkazů s třídou .ajax, které po kliknutí správně provedou akci a aktualizují snippet. No problem.

Problém nastává v momentě, když bych si chtěl u některých odkazů napsat vlastní extension.

<script>
$.nette.init();
$.nette.ext('confirmBeforeSend',{
	before: function() {
		// potvrdit akci, pokud ne, return false
	},
	success: function(payload) {
		.....
	}
});
</script>

Lze a pokud ano, tak jakým způsobem tuto extension napojit pouze na některé ajaxové odkazy?
Např. že odkazy, kde bych chtěl provést callbacky z „confirmBeforeSend“, bych označil třídou „.confirmAjax“ a poté si do JS napsal něco jako

<script>
$.nette.init();
$.nette.ext('confirmBeforeSend', { /* callbacky */  });
$(document).on('click','.confirmAjax',function(){
	// zde docílit toho aby ".confirmAjax" využil mé extension 'confirmBeforeSend'
});
</script>

Takže prostě aby se zachovala původní funkcionalita u „.ajax“ odkazů a u „.confirmAjax“ se spustily nějaké mé předem definované callbacky.

Pokud jsem to celé nějak špatně pochopil, tak se omlouvám, za přihlouplý dotaz.

Díky

Zdravím, mam jeden problém:

$.nette.ext('data-click-handle',{
		init: function(){
			var visibleDiv = 'default'; // default
		},
		before: function(){
			if(!$(".presenter-rightContent").is(":visible")){ //ak nie je element visible
				visibleDiv = 'none';
			}
		},
		load: function () {
			$('tr[data-click-handle]').click(function(e){
				e.preventDefault();
				var obj = $(this).data('clickHandle');
				if (obj.type == 'ajax') {
					$.nette.ajax({
						url: obj.url
					});
                                // ajaxové volanie handle
				} else {
					window.location = obj.url;
				}
			});
		},
		success: function () {
			if(visibleDiv == 'none'){ // ak nieje element visible zobraz ho
				$(".presenter-rightContent").show("slide", { direction: "right" }, 700);
			}
		}
});

chcel by som si pred vykonaním požiadavku zapamatovat .presenter-rightContent či je visible alebo nie, a po požiadavke spracovať, ale neviem ako si mám prenášať visibleDiv?

Supis, dakujem.