Formulář v modalu se nesubmitne

Higr

Dokáže mi někdo říct, proč se AJAX formulář nesubmitne? Žádný z callbacků onSuccess/onValidate/onError… se nezavolá.
Tohle chování se dějě pouze pokud je formulář v modalu, jinak vše funguje v pořádku. Form má classu ajax. V network tools je vidět request s odeslanými daty a jako response je celé HTML vyrenderované stránky. V presenteru $this->getHttpRequest() ukáže správně ajaxový request. Na stránce je jen jeden modal s formulářem. Zkoušel jsem různě přidat snippety ale nepomohlo. Koukal jsem i na ostatní posty ale nic.

Presenter:

public function createComponentCategoryAddModal(): Modal
	{
		$onSuccess = function () {
			$this->redrawControl('modal');
		};

		$modal = $this->modalFactory->create();
		$modal->setContent($this->formFactory->createAdminComponentCategoryForm(null, $onSuccess));

		return $modal;
	}

Modal:

class Modal extends Control
{

	public function __construct(
		public ?string $title = null,
		public mixed $content = null,
	)
	{}

	public function render()
	{
		$this->template->setFile(__DIR__ . '/modal.latte');

		$this->template->title = $this->title;
		$this->template->content = $this->content;

		$this->template->render();
	}

	public function setTitle(?string $title): void
	{
		$this->title = $title;
	}

	public function setContent(mixed $content): void
	{
		$this->content = $content;
	}
}

<div class="modal fade modal-ajax" id="modal" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{$title}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body" n:snippet="modal">
				{control $content}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{_'modal.close'}</button>
			</div>
		</div>
	</div>
</div>

Form:

	public function createAdminComponentCategoryForm(?int $categoryId, callable $onSuccess): BaseForm
	{
		$category = $categoryId ? $this->adminComponentModel->getCategoryById($categoryId) : [];

		$form = new BaseForm($this->translator);
		$form->setAjax();
		$form->addText('label', 'global.table.name')->setMaxLength(50)->setRequired();
		$form->addText('note', 'global.note')->setMaxLength(250);
		$form->addSubmit();
		$form->setDefaults($category);

		$form->onSuccess[] = function ($form, $values) use ($categoryId, $onSuccess) {

			// validace a ukladani

			$onSuccess();
		};

		return $form;
	}

default.latte:

{control categoryAddModal}

Editoval Higr (24. 2. 17:16)

m.brecher

@Higr

Form má classu ajax.

OK, máš správně do stránky vloženu + inicializovánu knihovnu naja ?

V network tools je vidět request s odeslanými daty a jako response je celé HTML vyrenderované stránky.

máš v prohlížeči zapnutý javascript ?
Tracy ukazuje ajaxový request ?

Není překreslení formuláře vloženého do Modalu zbytečně složité ?? Formulář předává callback do presenteru aby ten zajistil jeho překreslení překreslením snippetu v parent komponentě Modal, který se jmenuje ‚modal‘, ale nepřekresluje Modal, nýbrž vnořenou komponentu $content. I když zde asi chyba nebude – proč nezavolat překreslení komponenty formuláře přímo uvnitř formuláře ?? Třeba takto:

$form->onSuccess[] = function ($form, $values) use ($categoryId) {
    // validace a ukladani
    $form->redrawControl('control')    // šablonu formuláře obalit snippetem 'control'
};

nebo pokud nemáš přístupnou šablonu formuláře, překresli snippet ‚modal‘ přímo z formuláře:

$form->onSuccess[] = function ($form, $values) use ($categoryId) {
    // validace a ukladani
    $form->parent->redrawControl('modal')
};

Chybu najdeš nejsnáze tak, že si vytrasuješ kam až dojde zpracování ajax submitu formuláře pomocí bdump().

mskocik

Ten formulár by si mal mať pripojený do stromu komponent. Nette submit formulára vyhodnocuje podľa toho. Ešte je zvláštne, že tam máš $form->addSubmit(); a nemáš preň definovaný name (príklad $form->addSubmit('save'))

class Modal extends Control
{
    public function createComponentContent(): BaseForm|Control
    {
        return $this->content;
    }
}

{* modal.latte *}
...
<div class="modal-body" n:snippet="modal">
    {control content}
</div>
...

Higr

@mskocik

Děkuji tohle bylo přesně ono, neměl jsem v modalu vytvořenou komponentu pro formulář, taky mě to mohlo napadnout :D

EDIT: Ještě tam byl problém že se nezobrazovaly validační hlášky při $form->addError() což jsem vyřešil přes $this->onError[] = fn($form) => $form->getParent()->redrawControl();

Editoval Higr (26. 2. 9:46)