Dva různé formuláře a submit jedním tlačítkem
- Lizardor
- Člen | 35
Zdravím narazil jsem na problém, mám modal okno kde mám „name“ input (form) který se opakuje pouze jednou a pak pomocí Multiplieru generování formulářů pro jazyk. Potřebuji udělat, abych na jeden submit (tlačítko save) dostal data z obou formulářů (jak name, tak všechny data z jazyků). Nemá někdo nápad jak to udělat?
viz obrázek – http://screenshot.cz/…O5/modal.png
Editoval Lizardor (18. 5. 2016 14:46)
- Lizardor
- Člen | 35
<div class="modal fade" id="newInfo" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New info / Edit</h4>
</div>
<div class="modal-body">
{foreach $languages as $language}
{first}
{form name}
<div class="form-group input-group">
<span class="input-group-addon">Name</span>
{input name}
</div>
{/form}
<ul class="nav nav-tabs">
{foreach $languages as $lang}
<li {first}class="active"{/first}><a data-toggle="tab" href="#info{$lang->code}">{$lang->code}</a></li>
{/foreach}
</ul>
{/first}
{first}
<div class="tab-content">
{/first}
<div id="info{$language->code}" class="tab-pane fade {first}in active{/first}">
{var $name = "newEditInformation-$language->id"}
{form $name}
<div class="col-lg-12">
<div class="form-group input-group">
<span class="input-group-addon">Title</span>
{input title}
</div>
<div class="form-group input-group">
<span class="input-group-addon">Value</span>
{input value}
</div>
</div>
<div class="modal-footer">
<a href="#" onclick="$('.modal').modal('hide');" id="info-add">
{input save}
</a>
</div>
{/form}
</div>
{last}
</div>
{/last}
{/foreach}
</div>
</div>
</div>
</div>
tady to je teda na dva formy, ale když to celé obalím do formu tak jak zajistím aby tam tab-content byl jenom jednou? pomocí {first} težko, jelikož by to bylo jen v prvním formu už ne v těch ostatních. Pokud teda nějak nejde ukončit form a pak na něj navázat.
- Jan Mikeš
- Člen | 771
Napr takhle jednoduse:
<div class="modal fade" id="newInfo" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New info / Edit</h4>
</div>
{form myEditForm}
<div class="modal-body">
<div class="form-group input-group">
{label name}
{input name}
</div>
<ul class="nav nav-tabs">
{foreach $languages as $lang}
<li n:class="$iterator->first? active">
<a data-toggle="tab" href="#info{$lang->code}">{$lang->code}</a>
</li>
{/foreach}
</ul>
<div class="tab-content">
{foreach $languages as $lang}
<div id="info-{$language->code}" n:class="$iterator->first? active, tab-pane, fade, in">
{label langs-$lang->code-title /}
{input langs-$lang->codetitle}
{label langs-$lang->codevalue /}
{input langs-$lang->codevalue}
</div>
{/foreach}
</div>
</div>
<div class="modal-footer">
{input save}
</div>
{/form}
</div>
</div>
</div>
Taktez by bylo dobre si zrusit
onclick="$('.modal').modal('hide');"
a napsat si extension, ktera
po uspesnem odeslani formu modal zavre, namisto takhle blbe, napr pokud tam
budes mit required pole, ktere neni vyplnene ale kliknes button, tak ti modal
zmizi a formular se neodesle ;)
Jedine co budes muset upravit je tvuj formular a jeho zpracovani tak, aby vyuzival kontejnery, ja pro jazyky pouzivam toto:
$form->addContainer("translations");
foreach ($this->translator->getAvailableLocales() as $locale) {
$group = $form->addGroup($locale);
$container = $form["translations"]->addContainer($locale);
$container->setCurrentGroup($group);
$container->addText("name", "Název", 30);
$container->addTextarea("info", "Informace", 30);
$container->addTextarea("description", "Popis");
} }
Groups jsou v kodu proto, ze vyuzivam vlastni renderer a nevykresluji je rucne.
Editoval Lexi (18. 5. 2016 15:30)
- Jan Mikeš
- Člen | 771
Jak pouzivam ja modaly (a extension pro jejich otevirani/zavirani) s nette.ajax.js se muzes inspirovat zde i presto ze je to dost zjednodusena verze tak je to pouzitelne
- Lizardor
- Člen | 35
Lexi napsal(a):
Jak pouzivam ja modaly (a extension pro jejich otevirani/zavirani) s nette.ajax.js se muzes inspirovat zde i presto ze je to dost zjednodusena verze tak je to pouzitelne
Díky moc, aspoň jsem se naučil další nové věci. Jinak co se týče save buttonu, tak tenhle modal jsem odněkud vzal, takže samozřejmě že bych to ošetřil :D. Ale ještě jednou díky trápil jsem se s tím dneska dlouho :)
- Jan Mikeš
- Člen | 771
Trosku jsem se nechal inspirovat a upravil jsem si svoje formy, aby vyuzivaly taktez taby pro preklady, s tim bylo ale spojeno rucni renderovani, ktere jsem si napsal tak, aby pasovalo univerzalne na vsechny formulare, treba ti to pomuze alespon jako inspirace:
add.latte i edit.latte:
{if $entity instanceof App\Model\Entities\ITranslatable}
{include 'translatableForm.latte', formName => 'manageForm'}
{else}
{control manageForm}
{/if}
translatableForm.latte:
{form $formName}
{var $renderer = $form->getRenderer()}
{$renderer->render($form, 'ownerrors')|noescape}
<fieldset>
{foreach $form["common"]->controls as $formControl}
{$renderer->renderPair($formControl)|noescape}
{/foreach}
</fieldset>
<ul class="nav nav-tabs" n:inner-foreach="$form['translations']->components as $locale => $container">
<li n:class="$iterator->first? active">
<a data-toggle="tab" href="#tab-lang-{$locale}">
{$locale}
</a>
</li>
</ul>
<div class="tab-content" n:inner-foreach="$form['translations']->components as $locale => $container">
<fieldset n:class="$iterator->first? active, tab-pane" id="tab-lang-{$locale}" n:inner-foreach="$container->controls as $formControl">
{$renderer->renderPair($formControl)|noescape}
</fieldset>
</div>
<fieldset>
{foreach $form["buttons"]->controls as $formControl}
{$renderer->renderPair($formControl)|noescape}
{/foreach}
</fieldset>
{/form}
Aby ti fungovalo presne toto reseni je potreba splnit pouze predpoklady s pojmenovanim kontejneru:
$form->addContainer("common"); // zde definuji vsechny inputy, ktere jsou spolecne pro vsechny jazyky
$form->addContainer("translations"); // container pro locales
foreach ($locales as $locale) {
$form["translations"]->addContainer($locale); // do tohoto kontejneru se definuji inputy ktere jsou prekladane
}
$form->addContainer("buttons"); // zde jsou definovana tlacitka (mam zde pouze 1, submit tlacitko)
Vytvoril jsem si spolecnou factory, aby definice jednotlivych formularu byla co nejjednodussi (zde nemam jeste aplikovano generovani formularu z entit), abych musel psat co nejmene, jednotlivy formular pak muze vypadat napr takto:
final class FormFactory extends TranslationFormFactory
{
public function addCommonInputs(Container $container)
{
$container->addText("date", "Datum")
->setRequired()
->setAttribute("class", "dtpicker")
->setAttribute("placeholder", "dd.mm.YYYY");
}
public function addTranslationInputs(Container $container)
{
$container->addText("title", "Nadpis", 30);
$container->addTextArea("text", "Text")
->setAttribute("class", "ckeditor");
}
}
Pokud by byl zajem, muzu dopsat k pouziti extension, dokumentaci a vytvorit composer balicek.