Contributte/Forms-multiplier a naja.js – ajax
- cafesk8
- Člen | 103
Zdravím, snažím se rozjet https://github.com/…s-multiplier společně s https://naja.js.org/ … nemáte s tím někdo zkušenost? Dokud to mám bez ajaxu, tak mi přidávání a odstraňování multiplier containerů funguje v pořádku. Zůstává mi pořád pouze jedna defaultní sekce multiplieru a další se ne a ne zobrazit, zkoušel jsem při kliknutí tlačítka v naja.js submitnout formulář, zkoušel jsem různé kombinace snippetů a snippetArea a vše marně.
latte
{snippetArea hypoForm}
<form n:name="hypoForm">
{snippet hypoZadatel}
<fieldset>
<legend>Infomrace o žadatelích</legend>
<div n:multiplier="zadatel">
{label vek /}
{input vek}
{label rodinny_stav /}
{input rodinny_stav}
{btnRemove}
</div>
{btnCreate zadatel}
</fieldset>
{/snippet}
</form>
{/snippetArea}
form
$form = $this->factory->create();
$form->getElementPrototype()->class('ajax-stop');
$zadatel = $form->addMultiplier('zadatel', function (Nette\Forms\Container $container, Nette\Forms\Form $form) {
$container->addInteger('vek', 'Věk žadatele');
$container->addSelect('rodinny_stav', 'Rodinný stav',$this::rodinnyStav());
}, 1, 10);
$zadatel->addRemoveButton('Smazat', function (Nette\Forms\Controls\SubmitButton $submitter) {
$submitter->setValidationScope(false);
$submitter->onClick[] = function () {
$this->redrawControl('hypoForm');
$this->redrawControl('hypoZadatel');
};
})->addClass('ajax');
$zadatel->addCreateButton('Create', 1, function (SubmitButton $submitter) {
$submitter->setValidationScope(false);
$submitter->onClick[] = function () {
$this->redrawControl('hypoZadatel');
$this->redrawControl('hypoForm');
};
})->addClass('ajax');
$form->addSubmit('send', 'OK')
->getControlPrototype()->class('btn btn-primary');
$form->onSubmit[] = function ($form) use ($onSubmit) {
$onSubmit();
};
presenter
protected function createComponentHypoForm(): Form {
return $this->hypotecniKalkulacka->create(
[$this, 'calcSuccess'],
[$this, 'calcSubmit']
);
}
public function calcSubmit() {
$this->redrawControl('hypoZadatel');
$this->redrawControl('hypoForm');
}
naja
import naja from 'naja';
import netteForms from 'nette-forms';
naja.formsHandler.netteForms = netteForms;
class myExtension {
constructor(naja) {
const addZadatel = evt => {
evt.preventDefault();
this.addZadatel();
}
naja.addEventListener('load', () => {
const createZadatel = document.querySelector('input[name="zadatel[multiplier_creator]"');
createZadatel.removeEventListener('click', addZadatel);
createZadatel.addEventListener('click', addZadatel);
});
}
addZadatel() {
const form = document.getElementById('frm-hypoForm');
if(netteForms.validateForm(form)) {
naja.uiHandler.submitForm(form);
}
}
}
naja.registerExtension(myExtension);