měnitelný počet formulářových elementů

Psano z hlavy… Nezapomnět zaregistrovat addDynamic dle návodu.

$form = new Nette\Application\UI\Form;

// vyber poctu
$form->addSelect('count', 'Pocet', range(1,10) )->addRule(Nette\Application\UI\Form::FILLED, 'Zvolte pocet...');

if ($form->isSubmitted()) {
   // jméno, továrnička, výchozí počet
   $replicator = $form->addDynamic('textFields', function (Container $container) {
       $i = (int) $container->getName();
       $container->addText('text', 'Textbox c. '.$i);
   }, $form['count']->getValue() );
   $form->addSubmit('save', 'Ulozit obsah textboxu')
       ->onClick[] = callback($this, 'saveResult');
} else {
   $form->addSubmit('show', 'Zobraz textboxy');
}

return $form;

Editoval Ot@s (14. 10. 2011 9:35)

colek napsal(a):
Takhle mi to funguje tak jak chci. Jen bych se ještě zeptat, jak to zajaxovatět? Aby se to načetlo po změně toho selectboxu, abych na to nemusel klikat „Zobrazit další pole“.

Asi bys musel formulář manuálně rozepsat v šabloně. Část, ketrou cheš „ajaxovat“ dát do snippetu, na ovládací formulářový prvek navěsit onchange/onblure a pomocí JS submitnout formulář (nebo v tom samém JS nasimuluješ signál s parametrem počtu vypisovaných formuklářovýchy polí).

colek napsal(a):

Pokusil jsem se udělat to co mi napsal Ot@s, ale evidentně jsem někde pochybil.

díky za radu

1. Připomínám, že budeš potřebovat ajaxové formuláře a JQuery
2. Obsah komponenty v presenteru, resp. formulář

protected function createComponentUkazkovyFormular($name)
   $form = new Form($this, $name);
   $form->addSelect('count', 'Pocet', range(1,10) )->addRule(\Nette\Application\UI\Form::FILLED, 'Zvolte pocet...');
   $age = $form->addContainer('age');
   $age->addText('0', 'Věk osoby č. 1');
   if ($form->isSubmitted()) {
	if ($this->presenter->isAjax()) $this->invalidateControl('formular');
	for ($i=1;$i<=$form['count']->getValue();$i++) $age->addText($i, 'Věk osoby č. '.($i+1));
   }
   $form->addSubmit('show', 'Generovat'); // nahrada za ->getControlPrototype()->onChange() u selectboxu
   $form->addSubmit('save', 'Ulozit'); // chybi doplnit onClick s callbackem
   return $form;
}

V render příslušného presenteru ještě „namontuj“ formulář do šablony.

$this->template->form = $this['ukazkovyFormular'];

3. Šablona

{$form->render('begin')}
<p>
    {$form['count']->label}
    {$form['count']->control}
    {$form['show']->control}
</p>
{snippet formular, table}
	<tr n:foreach="$form['age']->getComponents() as $f">
    		<th>{$f->label}</th><td>{$f->control}</td>
	</tr>
{/snippet}
{$form['save']->control}
{$form->render('end')}

<script>
$(function () {
	// "naroubovani" ajaxu na formular
        $("form").submit(function () {
                $(this).ajaxSubmit();
                return false;
        });
});
</script>

Editoval Ot@s (14. 10. 2011 9:28)

colek napsal(a):

Tak až zas někdy dorazím na PS, máš u mě minimálně pivo :)

Já takto Hosiplanovi dlužím už 3 pivka :-D

Nicméně to „skoro funguje“, ale nepodařilo se mi rozchodit, aby se formulář odeslal po změně u selectboxu. Po stisknutí tlačítka generovat vše funguje.

Doplň si tedy:

<script>
$(function () {
	$("#{!$form['count']->getHtmlId()}").change(function(){
		$(this).closest('form').submit();
	});
        $("form").submit(function () {
                $(this).ajaxSubmit();
                return false;
        });
});
</script>

Edit: teoreticky by mělo fungovat i $form['count']->getControlPrototype()->onChange("$(this).closest('form').submit()")

Editoval Ot@s (14. 10. 2011 14:44)

2 věci (viz. opravy v http://www.ulozto.cz/…/example-tgz dostupný do 2011–10–24):

1. nenalinkoval jsi do @layout.latte JS knihovny:

• jquery.min.js
• jquery.nette.js
• jquery.ajaxform.js

2. V default.latte, resp. v inline zápisu JS $("frm-mainIForm1").submit(...); má být $("#frm-mainIForm1").submit(...); (chybí #, který říká, že se má hledat v ID tagů). Ještě lepší je ale použít $("#{!$form->getElementPrototype()->id}").submit(...); (Nette samo dosadí ID formuláře).

PS: Tento přispěvek je přínosný jen pro Tebe ale je neužitečný pro ostatní. Takže buď pošli soukromý vzkaz, nebo uveď indicie tak, aby to bylo užitečné i pro ostatní.

colek napsal(a):

jak nastavit, aby se formulář nevalidoval? Protože musím nejdříve vyplnit celý form, než budu měnit počet políček.

Zkus trik, kterým spojíš příjemné s užitečným:

1. ponech v definici formuláře submitovací tl. (pomocí setValidationScope zakážeš validaci)

$form->addSubmit('show', 'Generovat')->setValidationScope(FALSE); // do sablony pak pridej {$form['show']->control}

2. pomocí JS $("#{!$form['show']->getHtmlId()}").hide(); ho zneviditelni (když někdo zakáže v prohlížeči JS, bude formulář funkční)
3. Pomoci JQuery nesubmituj formulář, ale simuluj klik na submitovaci tl., které má vyplou validaci:

$(function () {
	$("#{!$form['show']->getHtmlId()}").hide();
	$("#{!$form['count']->getHtmlId()}").change(function(){
                // $(this).closest('form').submit(); // nesubmitujeme formular
	        $("#{!$form['show']->getHtmlId()}").click(); // ale simulujeme click na submitbutton
	});
	// aktivace ajaxoveho submitnuti
	$("form").submit(function () {
		$(this).ajaxSubmit();
		return false;
	});
});