ajax na formulari nacitanem dynamicky

esorimer

Zdravím,
mám problém s ajaxe na formulářích nahraných pomocí $.colorbox, viz příklad:

<script>
	$.nette.init();
	var formId = 'frm-addArticel-articelForm';
	$('#addNews').colorbox({
		inline:false,
		html:false,
		href: NetteConf.router.plink(':NewsAgregator:addNews:'),
		onComplete : function() {);
			window.Nette.initForm($('form#'+formId)[0]);
		}
	});
</script>

Používám skript nette.ajax.js. Colorbox správně stáhne HTML formuláře, ale mám s tím 2 problémy:

Formulář se neodešle ajaxem. Pokud změním v nette.ajax.js řádku

<script>
...
	$forms.off('submit.nette', rh).on('submit.nette', rh);
...
</script>

na

<script>
...
	$forms.off('submit.nette', rh).live('submit.nette', rh);
...
</script>

tak už se odešle ajaxem, ale zase se mi zobrazují validační hlášky 2×.

Nevím jak po úspěšném odeslání formuláře překreslit snippety na stránce (formulář se překreslí s flash hláškou správně, ale zbytek stránky už ne).

Vojtěch Dobeš

Dej si do toho onComplete callbacku volání $.nette.load();. To zajistí znovunavázaní callbacků atd.
Co je tohle NetteConf.router.plink za užitečnou hračku :) ?
live() nepoužívej, od toho je v nette.ajax.js právě událost load.
Ad tvoje 2. otázka, to budeš muset ukázat více, nejspíš šablony a místa, kde voláš invalidateControl().

esorimer

vojtech.dobes napsal(a):

Dej si do toho onComplete callbacku volání $.nette.load();. To zajistí znovunavázaní callbacků atd

Super, díky, funguje. Nechápu že jsem na to nepřišel sám :-)

Co je tohle NetteConf.router.plink za užitečnou hračku :) ?

NetteConf je JS třída která se generuje pomocí Nette. Má v sobě linky a překlady textů, takže když se odkazuju na anglickou verzi obsahuje anglické routy a texty atd. (jsou to jen hloupé asociativní pole).

live() nepoužívej, od toho je v nette.ajax.js právě událost load.

Jasné.

Ad tvoje 2. otázka, to budeš muset ukázat více, nejspíš šablony a místa, kde voláš invalidateControl().

Takže formulář, který načítám colorboxem, je definovaný v componentě EditNewsControl (formulář se používá ve více presenterech).

<?php
class EditNewsControl extends BaseControl {
...
	protected function createComponentArticelForm() {
		...
		$form->onSuccess[] = $this->saveArticelSubmitted;
		return $form;
	}

	public function saveArticelSubmitted(Form $form) {
		...
		if (!$this->presenter->isAjax()) {
			$this->redirect('this');
		} else {
			$this->presenter->invalidateControl();
		}
	}
}
?>

Pak mam presenter NewsAgregatorPresenter, ktery v actionDefault vykresluje seznam novinek – ten chci po odeslání formuláře překreslit, aby se mi hned zobrazila nově vložená novinka.
default.latte vypadá takto:

<a href="#" id="addNews">kliknutim sem se otevre colorbox</a>

{snippet newsList}
{foreach $news as $new}
...
{/foreach}
{/snippet}

Stejný presenter má akci addNews, jejíž addNews.latte vypadá takto:

{extends ''}
{block content}

{snippet addArticel}
	<div n:foreach="$flashes as $flash" class="ajax flash {$flash->type}">{$flash->message}</div>
	{control addArticel}
{/snippet}

NewsAgregatorPresenter.createComponentAddArticel() vytváří komponentu EditNewsControl popsanou nahoře. A to je asi všechno…

Je mi jasný, že po odeslání formuláře se volá jen addNews action, takže ke generování seznamu z actionDaul nedojde. Co nevím je, jak to objít. Šlo by třeba poslat nějak signál v onComplete, který by zajistil překreslení snippetů?

esorimer

Tak už jsem to vyřešil. Snippet jsem dal jak do default.latte tak i do addNews.latte, přičemž v addNews.latte se vykresluje jen po odeslání formuláře. Foreach jsem přesunul do news-list.latte, takže addNews.latte teď vypadá takto:

{extends ''}
{block content}

{snippet addArticel}
    <div n:foreach="$flashes as $flash" class="ajax flash {$flash->type}">{$flash->message}</div>
    {control addArticel}
{/snippet}
{if $formSubmited}
	{snippet newsList}
	     {inlude 'news-list.latte'}
	{/snippet}
{/if}

Že mě to nenapadlo hned. Asi málo cukru v krvi nebo co, jdu si dát za odměnu čokoládu :)