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

Experimentálně.

(function($, undefined) {
	/**
	 * Shows HTTP Error Statuses from Ajax request
	 */
	$.nette.ext('httpStatusToFlash', {
		error: function (payload) {
			if (payload.status != 200) {
				$('#snippet--flashMessages').html('<div class="alert alert-error"><a class="close" data-dismiss="alert">×</a>'+payload.status+' '+payload.statusText+'</div>');
			}
		}
	});
})(jQuery);

A ještě více experimentálně https://gist.github.com/2946969 s odchycením headers pro FireLogger a zobrazením chyby do flash zprávy. Funguje i při neaktivním fireloggeru, protože extension posílá v send requestu vlastní header fireloggeru,

V produkčním režimu se zobrazí pouze „500 Internal Server Error“.

V development se zobrazí takhle (s použitím twitter bootstrap):

Odkaz je klikatelný pro otevření souboru v editoru.

Má to daleko k použitelné verzi, ale zatím jsem chtěl hlavně, ať se mi zobrazí nějaké info o chybě i při zavřeném firebugu.

Editoval LeonardoCA (18. 6. 2012 8:23)

Mám to přidat jako extension do hlavního repozitory na github? S gitem začínám, takže v tom ještě plavu… nevím co přesně chceš. I proto se mi včera povedlo commitnout bez komentáře… psal jsi něco o pull requestu ze specifické branche – to si nejsem jist co tím myslíš? Budu si muset přečíst nějakou dokumentaci :)

Jinak hlavní věc co by to chtělo přídat, je předávat, element pro flash snippet a obalovací elementy jako parametry. Pak už by to mohl využít kdokoli.

Původně jsem zkoušel nějak hacknout debugger, aby poslal laděnku přímo html nebo json, ale ono to tady není jak udělat bez přímého zásahu do kódu. (Ale i tak, než složitě dekódovat výstup pro fireLogger by se hodilo, kdyby byl Debugger rozšířený o JSON výstup)

Tak to mi nedošlo, musím hned vyzkoušet…

Edited:
čas byl až teď.
Dá se využít „X-Nette-Error-Log“, akorát je škoda, že se neposílá firelog info i tento header zároveň.
Osobně by mi stačilo na hloupé chyby a překlepy zobrazit jen základní info a nepotřebuji k tomu celou laděnku.
A naopak při otevřeném firebugu se zase název souboru s logem neposílá.

Jinak stačí přidat do base prezenteru něco jako

	public function handleGetExceptionLogFile() {
		echo file_exists($filename = $this->getParam('file')) ? file_get_contents($filename) : '"'.$this->getParam('file').'" not found.';
		$this->terminate();
	}

a v js pak pří chybě

		var fileLog = payload.getResponseHeader('X-Nette-Error-Log');
		if (fileLog) {
			matches = window.location.href.match(/^[^\?#]*/g);
			var getLogUrl = matches[0] + '?do=GetExceptionLogFile&file='+fileLog;
			// displays debugging info in iframe
			html += '<iframe src="'+getLogUrl+'" width="' + (flashMessages.width() - 30) + '" height="500"></iframe>';
			// or opens new window with debugging info
			window.open(getLogUrl);
		}

zatím jen proof of concept, určitě to půjde udělat pěkněji

Editoval LeonardoCA (18. 6. 2012 21:32)

Zdravim,

LeonardoCA napsal(a):

	public function handleGetExceptionLogFile() {
		echo file_exists($filename = $this->getParam('file')) ? file_get_contents($filename) : '"'.$this->getParam('file').'" not found.';
		$this->terminate();
	}

tohle zobrazovani chybovych hlasek pri ajaxu je prima, preci jen vic kamaradim s ladenklou nez z fireloggerem. Jen by me zajimalo, jak byste u tohohle nejlepe resili zabezpeceni? Aby se nikdo nedostal k souborum, na ktere nema narok?

Nejak ho „jailnout“ napr jen do log adresare, plus pripadne nejaka podminka isDevelopmentMode() nebo uplne jinak a lepe?

Podobnou funkcionalitu bych si totiz rad zprovoznil na cteni zalogovanych chyb z debug panelu, protoze kolikrat na stroj, kde vyvijim nemam pristup na primo (pouze pres http) a lezu tam pres ssh pres nekolik ruznych stroju, proto jednoduche zobrazeni a pripadne stazeni vygenerovanych erroru je celkem opruz.

Mám dotaz a sice, jak manuálně zavolám update snippetů? Jedná se mi konkrétně o JS FB login, kdy potřebuji udělat update snippetů po přihlášení, tedy v callbacku toho scriptu, kde volám ručně $.get('?do=fbLogin', function(){...tady update snipett; jak?...})

Diky Vojto, tohle je plně funkční/dostačující aspoň v tuhle chvíli .-)

Buď přes extension, anebo ve tvém případě lze rovnou:

$.nette.ajax({
	type: 'get',
	url: ...
}).done(function (payload) {
	...
});

Editoval vojtech.dobes (21. 6. 2012 20:49)

Jo, tak v globálním případě jsou právě na to extenze.

$.nette.ext('foobar', {
	success: function (payload) {
		myFunction();
	}
});

no volá:

success: function () {		$.nette.load();	}

ale dobrý, jestli je vlastní extension jediná správná volba, tak pak to udělám tak.

Edit: Navíc se dá upravit přímo plugin, že..

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

přidej si do payload nějaký příznak a v sucess podmínku pokud je nastaven tak zavoláš callbacky, podobně jako je uděláno redirect atp.

Od toho je $.nette.ajax()

22 napsal(a):

Pokud tim callbackem myslis toto:

			success: function(){
				alert('done');
			}

tak to by teoreticky fungovat melo – zkousel jsem si obdobny pripad (kde jsem pouzival volani $.nette.ajax()) a alert mi probehl.

ale jinak myslim ze @LeonardoCA mel na mysli si napsat vlastni extenzi podobnou te redirect:

$.nette.ext('callbacks', {
	success: function (payload) {
		if (payload.callbacks) {
			for (var i in payload.callbacks) {
		    		eval(payload.callbacks[i]);
                	}
		}
	}
});

a v presenteru neco jako:

$this->payload->callbacks = array(
	"alert('done');",
);

Netestovano – psano z hlavy :( a mozna to take neni uplne koser takhle predavat js kod a provadet eval(), zalezi na tom jak moc chces tu extenzi univerzalni… jinak bych si napsal nejakou konkretni extenzi a posilal jen jeji „parametry“

Dokazu si treba hezky predstavit extenzi focus:

$.nette.ext('focus', {
	success: function (payload) {
		if (payload.focus) {
			$('#'+payload.focus).focus();
		}
	}
});

@22: Tak ted ti asi uplne nerozumim… jako ze neprobehne ten ten POST na formulari? dle jquery dokumentace by success mel byt volan pouze pokud ajax probehne:

success(data, textStatus, jqXHR)
A function to be called if the request succeeds.

//EDIT:

nebo ti ajax probehne a neprobehne ten naveseny callback na tlacitku forumlare (onClick[])? Pak bych bych videl problem v tom, ze se ti neposila ajaxem, kttere tlacitko „bylo zmacknuto“

rekl bych ze se to resi nekde tady: nette.ajax.js:241

//EDIT2:
jinak tyhlety pripady resim tak (i kdyz nevim zda spravne – ale funguji), ze tlacitku (nebo celemu formulari – podle toho zda chces zajaxovat pouze to tlacitko ci cely formular) dam tridu „ajax“ a pak uz jen na tlacitku udelam trigger('click.nette') a provede se „vsechno co je treba“ samo:

	$('selektorTlacitka').trigger('click.nette');

Editoval stefi023 (26. 6. 2012 10:28)

22 napsal(a):

OK v tom pripade viz nahore editovany koment

22 napsal(a):

@stefi: tvé odpovědi moc nerozumím.. můžeš mi napsat tedy k tomuhle obsluhu, tak, aby proběhl callback pro onClick[]

Predne teda asi getControlPrototype() je metoda takze se zavorkami (ale to byl asi jen preklep)

Pres extenzi

	$form['ok']->getControlPrototype()->class('myAjax ajax');
	//$form['ok']->getControlPrototype()->addClass('myAjax ajax'); //asi lepsi, co kdyz uz tam neco mas

a pak

$.nette.ext('callbacks', {
        success: function (payload) {
                if (payload.callbacks) {
                        for (var i in payload.callbacks) {
                                eval(payload.callbacks[i]);
                        }
                }
        }
});

Potom

	$('.myAjax').trigger('click.nette');

a

public function ajaxSubmit(SubmitButton $form)
{
	$this/*->presenter*/->payload->callbacks = array("alert('done');")
        Debugger::fireLog($form->form->values);
}

Pres $.nette.ajax()

pak by asi mohlo stacit:

$('.myAjax').on('click', function(){
        var form = $(this).closest('form');
	var values = form.serialize();
	values[$(this).attr('name') = $(this).val();
        $.nette.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: values,
                success: function(){
                        alert('done');
                }
        });

        return false;
})

//opet netestovano

Editoval stefi023 (26. 6. 2012 11:08)

HosipLan napsal(a):

Fuj fuj fuj eval.

Vsak jsem to tam nekde nahore psal :) vubec netusim jaky callback chce pustit a pocitam ze alert to nebude :)

Posilal bych jen nejake parametry – to jak jsem naznacil v ty focus extenzi…

Ad 22: jop, máš samozřejmě pravdu :) Plugin by snad potřeba upravovat nemělo být nikdy – je lepší vypnout a vytvořit vlastní (nebo jen vytvořit vlastní :) ) – což je výhoda při aktualizacích.

Editoval vojtech.dobes (26. 6. 2012 14:06)

Pro správné chápání: metoda $.nette.ajax() je ekvivalentem $.ajax() – ta sama o sobě taky neumí vyčarovat kouzla jako rozpoznání odesílacího tlačítka. Nicméně $.nette.ajax() na takové případy pamatuje :):

$('.myAjax').on('click', function (e) {
	$.nette.ajax({}, this, e).done(function () {
		alert('done');
	});
});

Klíčové je předání druhého a třetího argumentu metodě $.nette.ajax(), které umožní skriptu automaticky provést validaci události, zpracovat formulářové hodnoty atd. jako při automatické ajaxifikaci.

Editoval vojtech.dobes (26. 6. 2012 18:58)

22 napsal(a):
@stefi023: už nevím, jak to mám říct:

srry za mystifikaci… vzdycky kdyz uz si myslim ze tomu rozumim, tak zjistim ze je to uplne jinak :)

@stefi023: v pohodě, díky za snahu a čas .-)

Momentálně funkční, ale ještě těžkopadné řešení

https://gist.github.com/3107582

Integroval jsem pomocí compiler extension

• barDump při ajaxu
• na stejném principu dibi panel při ajaxu
• zobrazení laděnky do iframu při ajaxu

vše se aktivuje jen přilinkováním javascriptu a přidáním compilerExtension do bootstrapu

$configurator->onCompile[] = function ($configurator, $compiler) {
	$compiler->addExtension('ajaxpanels', new Lxo\Ajax\AjaxPanelsCompilerExtension);
};

Zatím se mi nepodařilo žádným způsobem jednoduše přidat obsluhu signálu do prezenteru, nakonec jsem to vyřešil nepěknou oklikou, přes Application->OnError[], protože se mi nepodařilo žádným způsobem ani přidat handle, ani přidat komponentu do presenteru.

Nejvíce by se mi líbilo, kdyby se dalo použít $presenter->AddComponent(), ale prezenter nemá žádné eventy, které by se daly použít a application nemá žádný event mezi vytvořením prezenteru a $presenter-run()

Chci moc, když nechci aby kdejaký addon kvůli každé maličkosti potřeboval přidávat něco do BasePresenteru? Nebo je na tom jak to chci dělat koncepčně něco špatně?

Já bych řekl, že ti musí stačit Application::$onRequest. Nevidím tam nic, na co bys potřeboval presenter. V request objektu máš všechny potřebný parametry.

Díky, to jsem potřeboval – pro tento případ – kdy nepotřebuju vyloženě presenter (už jsem se v tom včera trochu motal..)

Ale co kdybych potřeboval/chtěl do presenteru opravdu přidat nějakou komponentu?

A měl by sis říkat pouze o hash chyby, nevidím důvod proč by se muselo přenášet celý název souboru.

To ještě budu refaktorovat. Ale z hlediska bezpečnosti to není problém, protože to funguje jen v debug módu. A celé názvy souborů jsou stejně v laděnce všude.

Editoval LeonardoCA (15. 7. 2012 10:14)

Oprava validace:

$.nette.ext('form-validation', {
	success: function () {
		$('form').each(function () {
			Nette.initForm(this);
		});
	}
});

První příklad:

$.nette.ext('foobar', {
	load: function () {
		$("form.search input.name").on('keyup', function () {
	                if ($(this).attr('value').length >= 3) {
        	                console.log('ok'); // Zde odeslat
                	}
	        });
	}
});

Pokud bys chtěl v tom okamžiku přímo odeslat ten formulář (tedy de facto odeslat jej při události keyup za jisté podmínky…), tak by to vypadalo takto:

$.nette.ext('foobar', {
	load: function () {
		$("form.search input.name").on('keyup', function (e) {
			var $this = $(this);
	                if ($this.attr('value').length >= 3) {
				$form = $this.closest('form');
				$.nette.ajax({
					validate: {keys: false}
				}, $form[0], e); // Zde odeslat
                	}
	        });
	}
});

Editoval vojtech.dobes (19. 7. 2012 19:42)

Rad bych se zeptal, jak to resit, kdyz jsem si trosicku upravil extension snippets metodu applySnippet na:

<script>
applySnippet: function ($el, html) {
		// original
		// $el.html(html);

		$el.fadeTo(200, 0.01, function () {
			$(this).html(html).fadeTo(500, 1);
		});
	},
</script>

Mam problem s tim, ze potrebuji volat funkci po provedeni ajaxu, viz:

<script>
$.nette.ext('done', {
			complete: function (success) {
				setTimeout(startup, 201);
			},
			before: function(event){
				$("#ajax-spinner").show();
			}
	});
</script>

Nenapada vas nekoho lepsi reseni nez pres setTimeout? Kdyz totiz 20× kliknu na ajaxovy odkaz, tak se obcas stava, ze se funkce neprovede. A pokud si volani funkce narvu do callbacku k fadeTo, tak to je zase pozde, protoze se provede az po zviditelneni obsahu a ten pak obcas skace (ve funkci startup toho mam mraky).

Jak pripadne jinak a lepe vyresit update snippetu s efektem viz. https://componette.org/search/?… a zkombinovat to s volanim vlastni funkce po provedeni efektu?

Kurtas napsal(a):

Muze mi prosim nekdo poradit jak docilit toho aby mi nette.ajax.js nemenil URL po vykonani ajax requestu? Meni mi URL dle HREF nekdy je to prospesne (treba strankovani) ale nekdy je to naopak kontraproduktivni. Urcite to jde resit nejak jednoduse, ale bohuzel si nevim rady :(

Predem moc dik!

Můžeš vypnout celý history plugin:

<script type="text/javascript">
$.nette.ext('history', false);
</script>