Odeslání ajax formuláře tlačítkem mimo něj

Bajaja

Ahoj, potřebuju odesílat formulář tlačítkem mimo něj.

{form dataForm class => 'ajax'}
	{input data"}
	{input save style="display: none"}
	{input create style="display: none"}
{/form}

<button onclick="$('#frm-dataForm-save').click()">Ulož</button>
<button onclick="$('#frm-dataForm-create').click()">Vytvoř</button>

Používám nette 2.1, aktuální nette.ajax.js a netteForms.js. Data se na server odesílají, jenže při kliknutí na tlačítko odeslat se odeslání provede 2×. Také se mi neodesílá submit tlačítko, pouze data. Nevíte kde jak bych mohl tyto 2 věci vyřešit?

akadlec

zkus buď .trigger(‚click‘); nebo .mousedown();

Bajaja

Trigger se chová stejně jako .click(); a mousedown(); neudělá nic :-(

Zkoušel jsem to bez Nette v JsFiddle a tam se odešle obojí. Asi to bude někde něco v nette.ajax.js.

Zkoušel jsem i .submit() a to vyřeší to dvojité odesílání. Jen jestli to není moc hack.

Editoval Bajaja (23. 9. 2015 15:59)

johnnie

Pisal si ze si trigger si skusal ale ja nevidim dovod preco by to nemalo urobit nic ked pouzijes nieco v tomto style.

$("button.save").click(function(){
   $("input.submit-save").trigger('click');
   return false;
});

Bajaja

To také netvrdím. Trigger to spustí, ale mousedown ne. Probl0m nebude v tom, že nedokážu stisknout tlačítko javascriptem, ale v tom, co se děje potom a proč. Není nějaký lepší způsob jak odeslat ten formulář se submit tlačítkem?

akadlec

jo je, dát submit tlačítko do formuláře :D a odesílat jej klasicky. Pokud potřebuješ button vytáhnout nějak bokem tak pak to zkusit pomoci csska

Bajaja

Jenže já mám jedno tlačítko pro odesílání hidden a na něm navěšený další dvě (nahoře a vespod stránky).

Mě by zajímalo proč se do requestu nevloží i to submit tlačítko, když to tak u běžných formulářů funguje…

akadlec

pokud se dobře pamatuju tak když nette.ajax.js připravuje data k postu tak veme i submit button na který bylo kliknuto či první submit co najde pokud odešleš enterem.
Proč ty tlačítka tam nevygeneruješ 2x?

Bajaja

Teď jsem si zkusil odebrat formuláři classu ajax a v requestu je i submit tlačítko. Takže je to opravdu spojeno s tím ajaxovým odesíláním.

Proč ty tlačítka tam nevygeneruješ 2×?
Protože tam nechci mít duplicitu IDček.

Bajaja

Nevíte jestli je někde ukázka použití nette.ajax.js? V JavaScriptu moc neumím a proto by se hodily konkrétní ukázky. Mám dojem, že mé odesílání formulářů pomocí ajaxu není uplně správné. Formulář se mi odesílá 2×. V 1. requestu je dokonce i to submit tlačítko, jenže se request po 30ms přebije dalším. Když jsem odebral formuláři třádu ajax a přidal jí tlačítku, funguje to obdobně. Komu tuhle třídu mám ideálně dát?

Proč se extensions pro nette.ajax.js přidávají ke každému ajaxovému požadavku a pak „vypínají“ pomocí data-aja-off, nebylo by jednoduší definovat naopak ty, kde se má extension spouštět?

Pokud si ajaxem odešlu formulář z modalu, který mi přidá záznam do tabulky pod ním. Chci si překreslit snippet „tu tabulku“. Dá se tato akce nějak elegantně navěsit na success response formuláře? Když to udělám pomocí extension, musím to pak u všech dalších ajaxu „vypínat“.

Bajaja

Tak po dlouhém zkoušení jsem to vyřešel. Každopádně by bych si rád nechal vysvětlit proč to tak je.

Třídu .ajax jsem dal formuláři. Celé řešení je v tom, že javascriptově stisknutá tlačítka nevracela FALSE. Takže jsem jim nastavil onclick return false a obojí vyřešeno.

{form dataForm class => 'ajax'}
	{input data"}
	{input save style="display: none", onclick => 'return false;'}
	{input create style="display: none", onclick => 'return false;'}
{/form}

<button onclick="$('#frm-dataForm-save').click()">Ulož</button>
<button onclick="$('#frm-dataForm-create').click()">Vytvoř</button>

Michal Hlávka

Příště použij knihovnu, která ti dovolí zavolat metodu ajaxSubmit(), myslím, že by jste se vyhnuli téhle delší diskuzi. :-)

Bajaja

Příště použij knihovnu, která ti dovolí zavolat metodu ajaxSubmit(), myslím, že by jste se
vyhnuli téhle delší diskuzi. :-)

Jakou knihovnu máš na mysli?

Michal Hlávka

http://jquery.malsup.com/form/