Contributte/Forms-multiplier a naja.js – ajax

cafesk8
Člen | 103
+
0
-

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);
cafesk8
Člen | 103
+
0
-

SOLVED

Bylo potřeba invalidovat snippet redrawControl() při onAnchor metodě formuláře