odeslání formuláře pomoci onchange a následná změna pomocí ajaxu

Domki

Ahoj potřeboval bych poradit, zkousím ajax pomoci qs a https://componette.org/search/?…. Mám formulař kerej se odesila hned pri zmene.
A chci aby kdyz se odesle form, tak aby se pomoci ajaxu upravil vypis, ale porad to nacita celou stranku

v šabloně mám tu čast ktera se ma přepisovat obalenou pomocí: {snippet} … {/snippet}

ten soubor mam stazenej a v layout.latte ho includovanej,
V presenteru v metode kde porvadim veci kdy form byl odeslanej mam na konci metody

if (!$this->presenter->isAjax())
		{
			$this->redirect('this', $args);
		}
		else
		{
			$this->invalidateControl();
		}¨

a poté sem upravil kod ktery sem tam nasel, nevím jestli dobře tak aby vsechny formulare s tridou ajax byli odeslany ajaxem. A na https://componette.org/search/?… jsem nepochopil kam ho umistít, ted ho mam v hlavičce v souboru layout.latte

<script type="text/javascript">
		$("form.ajax").live("click", function (event) {
			event.preventDefault();
			$.get(this.href);
		});
	</script>

Editoval Domki (12. 8. 2012 19:32)

Domki

Čau opravdu nikdo nevíte co mám špatně aby mi to odesílalo ajaxově?

JakubTN

Mas formular vytvoreny s tou triedou „ajax“?

<form class="ajax" method...>
...
</form>

Vojtěch Dobeš

Když si přečteč ten poslední kód, co jsi uvedl, tak vlastně chceš zajaxovat „kliknutí na formulář“ :). Což není ono… kód by měl tedy vypadat takto:

$("form.ajax").live("submit", function (event) {
	event.preventDefault();
	$.get(this.href);
});

Odeslání na onchange pak docílíš takto:

#( ...selektor na prvek... ).change(function () {
	$(this).closest('form').submit();
});

Použij nette.ajax.js, uvedený kód se ti zkrátí (a bude o maličko výkonnější) na:

$.nette.ext('onchange', {
	load: function () {
		#( ...selektor na prvek... ).change(function () {
			$(this).closest('form').submit();
		});
	}
});
$.nette.init();

Domki

Jo ano máte pravdu
a takže když bych to udělalv nette.ajax.js jak pise vojtech.dobes a ve formulari budu mit select form a checkboxy tak ten kod by vypadal takto?:

$.nette.ext('onchange', {
        load: function () {
                #("select.ajax").change(function () {
                        $(this).closest('form').submit();
                });
        }
});
$.nette.ext('onchange', {
        load: function () {
                #("checkbox.ajax").change(function () {
                        $(this).closest('form').submit();
                });
        }
});
$.nette.init();

a tento kod muzu uvist do layout.latte
do tagu
<head><script>..kod…</script></head>

Nic mene porad do neodesila ajaxove
třidu k jednotlivym prvkum pridavam takto
$form->addCheckbox($i++, $znacka->znacka)->setAttribute(„class“, „onChangeSubmit ajax“);

Editoval Domki (13. 8. 2012 10:53)

Vojtěch Dobeš

Drobné upřesnění:

# místo $ je jen překlep, že?
celé obalit do $(function () { ... });
v nette.ajax.js je každé rozšíření třeba registrovat s jiným názvem (podpora pro anonymní rozšíření by asi bodla…). Uvedený kód bych nicméně přepsal takto:

$(function () {
	$.nette.ext('onchange', {
		load: function () {
			$("select.ajax, input[type=checkbox].ajax").change(function () {
				$(this).closest('form').submit();
			});
		}
	});
	$.nette.init();
});

Domki

Aha no ja s tím teprve začínam použil sem prvně ten co je v qs ale ten fungoval jen na odkazy ne na formulare
A tento i kdyz sem to takhle přepsal tak to porad načita stranku normalne.
ten soubor. netta.ajax.js mam includovanej, to cask kodu ktera se mam menit mam obalenou pomoci {snippet}

Vojtěch Dobeš

Chtělo by to více informací :). Máš tam includnuté jQuery? Hází javascriptová konzole nějaké chyby?

Domki

ok Jaké?

includnuty mam tyto:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/netteForms.js"></script>
	<script type="text/javascript" src="{$basePath}/js/vysouvani_zasouvani_bloku.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/lightbox.js"></script>
	<script type="text/javascript" src="{$basePath}/js/mojeScripty.js"></script>
	<script type="text/javascript" src="{$basePath}/js/nette.ajax.js"></script>

Co se tyce ty konzoly to nevím v tom se nevyznam ale jestli to je to v nabidce v prohlizeci konzola Js ta tam neco hází
Toto
GET http://localhost/…es/close.png 404 (Not Found)
ale to by melo byt jen ze to nenaslo obrazek
Ete naky inf jsou potřeba?

Vojtěch Dobeš

Hm, načítáš dvakrát jQuery :). Nicméně chybějící obrázek skutečně nebude ten problém… Má CSS třídu ajax i ten samotný formulář?

Domki

aha
No nemá
tu pridavam vzdy k selectu a checkboxu takto: ->setAttribute(„class“, „onChangeSubmit ajax“);

takže mam i k form
$form = new Form()->setAttribute(„class“, „ajax“);

Takhle?

Tak takhle mi to nedovolí tak jak?

Editoval Domki (13. 8. 2012 20:04)

Vojtěch Dobeš

To bude někde v dokumentaci, zkus zapátrat… ok, $form->getElementPrototype()->class = 'ajax';. Funguje to tak, že při změně těch prvků je dohledán formulář, ke kterému patří, a je na něm simulována událost odeslání. A nette.ajax.js provede zase to, že všechny formuláře s CSS třídou ajax jsou v okamžiku události submit odeslány nikoliv synchronně, ale ajaxově. V tom je ten fígl.

Domki

Ano, nešlo to opravdu kvůli tomu, ted už má form třidu ajax a odesíla to ajaxově.
Díky moc za pomoc

Jo etě dík za tip k tomu jquery. Sem nak si to jednou hodil na disk a pak to jednou ete includnul z webu.
Jen se etě optám nevadí když includuju na net? Třeba jako že by to nekdy bylo nedostupny?

Vojtěch Dobeš

Obvykle se to dělá tak, že se includuje z netu (protože je to rychlejší, spousta webů vlastně tahá jQuery z jednoho stejného serveru, takže je to soubor hluboko zacacheovaný v prohlížečích etc.), ale vždy je k dispozici i fallback na lokální verzi. Viz app/templates/@layout.latte z Nette Sandboxu nebo HTML 5 Boilerplate.

Domki

OK Díky.

besir

Nevím jestli jsi to tu třeba jen nedopsal, ale v

else
                {
                        $this->invalidateControl();
                }

Ti chybí jaký snippet chceš invalidovat. Tedy:

else
                {
                        $this->invalidateControl('nazevSnippetu');
                }

Vojtěch Dobeš

@besir To není potřeba. Volání bez názvu snippetu odpovídá logicky nepojmenovanému snippetu.

Domki

JJ o tomhle vím.
No nemusel bych bejt linej a pojmenovat si to =D
Ale myslím ze na tu jednu stranku to asi je jedno

Vojtěch Dobeš

Kupříkladu v šablonách komponent, kde celá komponenta má být de facto ajaxová, je podle mě pojmenovávání snippetů úplně zbytečné, a je fajn, že Nette tyhle „anonymní“ snippety podporuje.