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

Tohle bylo už delší dobu potřeba, díky!

Mít hotový nový addon portál, dal bych ti like!

Návrh na zlepšení: Zkus ten kód okomentovat pomocí jsDoc.

Mám problém s řádkem 86 if (/:|^#/.test(url)) return;. Vrací true a ajax se neprovede (po zakomentování vše funguje). V odkazech používám relativní cesty, přesto je v proměnné this.href cesta absolutní.

Jinak snad se mi podaří to celé rozložit ještě víc :). Rád bych i tuhle kontrolu vyčlenil jako extension.

Hm, pravda pravdoucí, on ten regulár hlídá i absolutní odkazy :). A this.href (tedy na AnchorElementu) evidentně vždy obsahuje absolutní cestu. Tento fix by to měl řešit.

Plánuje se i podpora historie u formulářů? Dokuď používám formuláře, které přesměrovávají na this, tak historie není potřeba. Jak ale vyřešit situaci, kdy po uložení formuláře má dojít k přesměrování na jinou akci? Upravil jsem JS pro podporu formulářů od řádku 236 nějak takto:

		if ($el.is('a')) {
			this.href = ui.href;
		}else if($el.is('input')){
			this.href = $el.parents('form:first').attr('action');
		} else if($el.is('form')) {
			this.href = $el.attr('action');
		}

Má to ovšem dvě nevýhody.

1. action formuláře musí vést na cílové URL ⇒ Továrnička na formulář se musí nacházet i na výsledné URL.
2. V historii zůstává v URL GET parametr do.

Ty další commity dávají smysl, takže to snad vadit nebude.

Super, chybi mi tam ale jeste jedna vec. Je fajn, ze to pracuje s history.pushState, ale uz to nedokaze nacist predchozi stav pri kliknuti na zpet v prohlizeci, coz je podle me celkem zasadni. S puvodnim skriptem tuhle upravu vyuzivam hlavne pro „zajaxovateni“ aplikace a presenteru. U HTML5 pres popstate, pro Internet Explorer pres hashbang pomoci pluginu jQuery BBQ – http://benalman.com/…-bbq-plugin/ – v tomhle pripade to plati nejen pro historii, ale i pri zadani adresy do prohlizece, kdy je potreba nacist aktualni stav, napr. https://nette.org/#…. Kod muzu v pripade zajmu poskytnout.

Souhlas :-) Ale JS neni moje parketa, tak bych to nejen pro zachovani cistoty kodu prenechal na nekom jinym. Navic asi neni uplne idealni pouzivat dalsi cizi pluginy (BBQ). Pokud by se do toho nekdo chtel pustit, rad poslu moje reseni vcetne vysvetleni, jak jsem rekl.

Chtěl bych mít možnost volat ajax z js tak, aby ho tento script obsloužil. Přemístil jsem si proto volání ajaxu do samostatné metody (viz commit: https://github.com/…2a1129047072). Zajímalo by mě, jestli je toto řešení správné. Ptám se i proto, že jsem si udělal základní podporu historie, která tuto změnu využívá. (commit: https://github.com/…bb9305da2213)

Vyčlenění nechám raději na tobě. Na zbytek pak pošlu pull.

Done in https://github.com/…ec89605c7a2f

Přidána podpora pro odesílání souřadnic kliknutí v obrázkovém tlačítku (thx to @uestla).

Ještě jednou díky za skript :-)
Při použití jsem narazil na nějaké drobnosti, které jsem si dovolil opravit .

Mám ale dotaz. Nejsem žádný JS guru, takže mě nenapadá čisté řešení.
Potřeboval bych přidat vlastní rozšíření, jehož obsluha se ale spustí až po proběhnutí obsluhy jiného rozšíření, v mém případě snippet. (Mým cílem je se snippetem po příchodu dále pracovat, pokud v payloadu přišly nějaké flagy, které mé rozšíření rozpozná.)

Všiml jsem si že v kódu je podpora pro vzájemné závislosti rozšíření, ale nejsem si jistý, jestli to ovlivní i pořadí jejich volání; spíše asi ne. Přijde mi to jako docela užitečná vlastnost. Podobně na History bych v budoucnu rád navěsil vlastní dodatečnou obsluhu pro navigaci vpřed a zpět.

Využil by to ještě někdo? Má smysl se nad sekvenčním voláním nějak pozastavovat anebo to mám řešit jinak? (V případě snippetů např. pomocí DOMSubtreeModified; u historie a jiných exts nevím)

Uf, dneska jsem na GitHubu upravoval ještě něco jiného a samo mi to vytvořilo branch patch-1, zatímco tady zase mastera. (Je někde sepsané doporučení jak při commitech řešit branche, requesty apod.?) Takže si to asi sám pickni, co uznáš za vhodné. Příště to zkusím udělat lépe.

To že se rozšíření spouštějí tak jak byly registrované jsem si všiml, ale nevím jestli je rozumné spoléhat na to, že se to chování v budoucnu nezmění. No ještě to zvážím a určitě budu sledovat další vývoj ;-)

Dostal jsem takový nápad ohledně historie a odkazů. Ne vždy se hodí přidávat do historie každý kliknutí ( započtení hlasu, změna řazení výpisu). Mohlo by se to nejak odlišit třídou např „nohistory“. Díval jsem se teď do aktuální verze, tam je kontrola signálu dle payloudu (to k tomu asi ani není zamýšleno). Myslítě že to najde využití?

Zkoušel jsem novou verzi a bohužel se validuje dvojitě pořád… Nikomu to nedělá? :-(

Pro jistotu přikládám kód, kterým inicializuji:

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

$('form').livequery(function () {
	Nette.initForm($(this)[0]);
});

$.nette.init(function (handler) {
	$('a.ajax').live('click', handler);
	$('form.ajax').live('submit', handler);
	$('form.ajax :submit, form :submit.ajax, form.ajax :image, form :image.ajax').live('click', handler);
});

Měl jsem podezření, jestli to není live() eventy, ale ani po přepsání na eventy klasické se validuje dvakrát :(

Já ti už ani nevím, na co je to .livequery dobré :)

$.nette.ext('formsValidationBind', {
	success: function (payload) {
		if (!payload.snippets) {
			return;
		}

		for (var i in payload.snippets) {
			$('#' + i + ' form').each(function () {
				Nette.initForm(this);
			});
		}
	}
})

@uestla: dneska jsem hledal takovou blbou chybu asi hodinu a zjistil jsem, že jsem 2× includoval head sekci a tudíž některé JS jely 2× nebo vůbec :-)

Zkus to hodit na čistý sandbox bez toho livequery, jestli problém přetrvá, a pokud to bude ok, pak následuje hra najdi 5 rozdílů :-)

Editoval 22 (6. 6. 2012 20:22)

Já už jsem právěže zoufalej, kontroloval jsem ± všechno a ne a ne najít příčinu.

A možná, že už jsem na to přišel :(

Jelikož navěšuju jak na tlačítko, tak na submit formuláře, nejspíš se provedou oba…

Pokavajď ale nahradím tenhle řádek následujícím,

if (!Nette.validateForm(analyze.form)) return false;

validace proběhne jen jednou. To jsem z toho tzv. blázen… Není možné, že by se někde v běhu validace/AJAX handleru nestopovala „propagace“ eventu?

Díky za poctivé brodění se tímhle bahnem, taky se na tu validaci mrknu.

Dynamické zajaxovatění používá takový trik, že v případě success se znovu volá $.nette.load();. Proto jsou v něm ty off, aby se to nenavěšovalo vícekrát. Je to efektivnější než livequery (to je to samé co deprecated live?), protože prohlížeč nemusí tak moc naslouchat a furt všechno kontrolovat, aby mu náhodou u nějakého nového prvku událost neušla… http://paulirish.com/…jquery-live/

Editoval vojtech.dobes (7. 6. 2012 23:29)

Super, moc díky – jak za opravu, tak za info o novém navěšování eventů, neměl jsem o tom ponětí.

<ot>jak to myslíš „ode mě“? ^^</ot>

Vydávám 2 verze/verzičky.

1.0.1

• doplněn chybějící výchozí selektor pro obrázková tlačítka se třídou ajax
• opraveno získání souřadnic kliku na obrázkové tlačítko v kontejneru
• opravena kompatibilita s netteForms.js (neprojití validace nyní zabije originální event objekt)

Díky za příspění @uestla.

1.1.0 (navazuje na 1.0.1)

• s rozšířeními lze nyní manipulovat i po volání $.nette.init() (přidávat, vypínat, získávat pro úpravy)
• u rozšíření nelze manipulovat s callbacky na události (viz níže)

Rozšíření se skládá ze sady callbacků a případného sdíleného kontext objektu. Callbacky de facto představují jádro rozšíření. Jejich úpravy/nahrazování mohou snadno vést k naprosté změně smyslu rozšíření – proto jsem se rozhodl zúžit API rozšíření na jejich kontext. Rozšíření jej mohou využívat k definování svého public rozhraní, zároveň by měla být psána tak, aby potřeba změny jednoho z callbacků vedla spíše k napsání vlastního nového rozšíření. Metoda $.nette.ext('name') nyní vrací přímo kontext extenze.

Budu rád za komentáře k této změně.

Extenze diagnostics.dumps

Do masteru jsem přidal rozšíření umožňující zobrazovat výsledky barDump volání proběhlých v Ajaxovém request přímo v DebugBaru. Stačí si do BasePresenteru přidat následující kód:

protected function afterRender()
{
	if (Debugger::isEnabled() && Debugger::$bar) {
		$panels = Nette\Reflection\ClassType::from(Debugger::$bar)
			->getProperty('panels');
		$panels->setAccessible(TRUE);
		$panels = $panels->getValue(Debugger::$bar);
		$this->payload->netteDumps = $panels['Nette\Diagnostics\DefaultBarPanel-4']->data;
	}
}

K dispozici je event error, takže nejlepší bude napsat si nějakou extenzi. Callback dostává stejné parametry jako callback na fail v klasickém jQuery ajaxovém requestu.

Editoval vojtech.dobes (15. 6. 2012 3:48)