Formulář odeslaný a vyměněný přes AJAX nejde podruhé odeslat

sejmor

Prosím o radu. Nekamenujte mě, vím že to je stupidita. Mám formulář v komponentě. AJAXem ho odešlu a vyměním ho v šabloně přes snippet za jinej. To funguje. Když chci, ale ten nový odeslat tak už to nejde. Chápu, že je potřeba ten AJAXEM vytvořený formulář přidat do DOM a registrovat asi událost, která ho obslouží. Ale nevím jak protože s JS si zrovna netykám. Používám nette.ajax.js a jenom klasické načtení

$(function () {
	$.nette.init();
});

Jak napsat obslužnou funkci aby se po AJAXovém vytvoření nového formuláře tento formulář přidal do DOM a fungoval také AJAXově ?

vitush93

sejmor napsal(a):

Prosím o radu. Nekamenujte mě, vím že to je stupidita. Mám formulář v komponentě. AJAXem ho odešlu a vyměním ho v šabloně přes snippet za jinej. To funguje. Když chci, ale ten nový odeslat tak už to nejde. Chápu, že je potřeba ten AJAXEM vytvořený formulář přidat do DOM a registrovat asi událost, která ho obslouží. Ale nevím jak protože s JS si zrovna netykám. Používám nette.ajax.js a jenom klasické načtení
$(function () {
	$.nette.init();
});
Jak napsat obslužnou funkci aby se po AJAXovém vytvoření nového formuláře tento formulář přidal do DOM a fungoval také AJAXově ?

To je divný, mě ajaxem vytvořené elementy nette.ajax s class=„ajax“ znovu-nabinduje automaticky…
Zkus to manuálně s jQuery jen jestli to něco dělá:

$(document).on('submit','#form-id',function(){
  $.ajax({
    type: 'GET',
    url: '',
    data: 'do=testSignal',
    success: function(payload) {
       $('#snippet--mujsnippet').html(payload.snippets['snippet--mujsnippet']);
    }
  });
});

Editoval vitush93 (27. 8. 2013 4:49)

sejmor

Zkusil jsem, ale mezitím mě něco tím tvojím skriptem napadlo. V šabloně jsem měl něco takového

{snippet radek, tr}
	{form ...}
		<td>{input send}</td>
	{/form}
{/snippet}

To nefungovalo. Když to ale změním na „klasický“ snippet vytvářející <DIV>:

<tr>
	{snippet radek}
		{form ...}
		...
		<td>{input send}</td>
		{/form}
	{/snippet}
</tr>

Potom i ten vygenerovaný formulář funguje. Má to ale jednu zásadní chybu. Puvodní formulář se nesmaže, ale zůstane na svém místě a ten nově vygenerovaný se dá nad začátek této tabulky (resp. jako <DIV> nad to <TR>. Jak to opravit ?

EDIT: Pokud úplně zruším ty tabulky tak to funguje jak má – formulář se přepíše a událost na něm funguje, ale já bych to potřeboval nějak naformátovat. Těch formulářů tam mám několik právě v řádcích <tr> a volá mi je „nadřazená“ komponenta ve foreach. A proávě proto jsem tam měl tu konstrukci:

{snippet radek, tr}
...
{/snippet}

U té mi fungovalo, že se formulář nevypíše nad tabulku, ale zase se mi na ní nepověsí ta událost.

Editoval sejmor (27. 8. 2013 10:35)

Mysteria

Zdravím, nepovedlo se náhodou někomu najít příčinu?
Mám stejný problém, tzn. formulář upravený přes AJAX už nejde znovu odeslat.
Používám poslední https://github.com/…ette.ajax.js.

akadlec

a nabindují se ti korektně všechny akce? Nejdojde k nějaké JS chybě? Máš tak správné classy? Je response ok?

Mysteria

Request, kterým načítám editační formulář vrací 200. Formulář má správně třídu class. Problém bude nejspíš s nabindováním těch akcí, protože nereaguje na nic (žádnej request nepošle, ani třeba testovací alert okno nevyskočí). Žádná JS chyba v konzoli není.

sKopheK

Část DOM zobrazená po přijetí přes AJAX nemá nabindované žádné akce, to se dělá hned při načtení stránky, proto musíš po přijetí odpovědi pro danou část DOMu bindovat znovu. Např.

function initPageJs() {
...
}

$('input.ajax[type="submit"]').click(function() {
	$(this).ajaxSubmit(function(payload) {
        	jQuery.nette.success(payload);
         	initPageJs();
        });
	return false;
});

$(function() {
	initPageJs();
})

Abys nebindoval všechno znova na celý dokument, ve funkci initPageJs() binduj jen pro elementy z obnoveného snippetu. Nette si aktivuje JS pro odeslání přes AJAX pomocí funkce bindAjaxLinks(). Pokud nemusíš, tak neobnovuj celý formulář, ale jen jeho část, pak bude odesílání formuláře fungovat pořád.

{form xyForm}
	...
	{snippet match-rounds}
        {var $_form = $form = $control['xyForm']}
	...
	{/snippet}
{/form}

Mysteria

@sKopheK: Bohužel ani když neobnovuju celej formulář (submit nechávám nezměněný), tak to ani tak nefunguje.

Každopádně určitě vyzkouším rozchodit ten JS kód, co jsi dodal, kdyby něco, ozvu se, zatím díky.

akadlec

Pokud použiješ nette.ajax.js tak nemusíš nic extra přidávat on si to bindue sám. A pokud ti to ani pak nefunguje tak se ti tam děje něco hodně zvláštního a chtělo by to vidět kódy.

Mysteria

@akadlec: Máš pravdu, opravdu si to binduje sám. Jenže jak se zdá, tak jenom na validní HTML kód, respektive když mám <table><form></form></table>, tak to nenabinduje, když mám <form><table></table></form> tak to funguje bez problémů.

Kdyby mě to napadlo dřív, mohl sem Vám ušetřit čas, ale zajímalo by mne, jestli je to tak „správně“.

Každopádně díky všem za pomoc. :)