Nette and Naja not woking on buttons

Antarian

Hello,
I have only one form on the page with list of items in style <form method="post" id="actionForm"></form>
Then I have multiple different buttons around the page all using Nette Signals.
They reference this simple form to submit data. E.g.
<button form="actionForm" action="{link toggle! $item->id}" class="ajax"></button>

Is there any workaround or extension for Naja and Snippets to work with this style of HTML?

Adding class="ajax" on form will do almost nothing here. It will actually create AJAX cals to the main displayed page.
If I wrap all buttons in separate forms, Naja AJAX will work nicely. I would really prefer not to add so many form elements.

Any help here, or shared code how to extend Naja would be appreciated.

Infanticide0

Hello,

<button> without type=“button” will submit parent form.
Button action should be formaction probably, this may help

Antarian

Thank you. Yes, I had a typo on button I copied here. But even with formaction it will not work with class=“ajax” and Naja. That style in link posted is not compatible with snippets :(
https://doc.nette.org/…ication/ajax

Will dig into the Naja JS. Seems that Naja is taking AJAX target path from the form with ajax css class or from the parent form wrapping button with ajax css class. This case is outside of those two, as target path is on the button itself in formaction attribute.

Antarian

Seems that button needs type submit to work with ajax class :) and form needs to be without ajax. This is not mentioned anywhere in docs.
This finally works with no tampering with Naja or previous style:

<form method="post" id="action"></form>

<button type="submit" form="action" formaction="{link toggle! $item->id}" class="ajax">Toggle</button>