Rozpoznání tlačítek při odesílání ajaxového formuláře

Mirda

Dobrý den,

potřebuji rozlišit tlačítka při odesílání ajaxového formuláře.
Běžně užívané if($form[‚save‘]->isSubmittedBy() nefunguje.

Díky.

Vojtěch Dobeš

Co používáte za ajaxovací skript?

Mirda

ajax z Quickstartu

Vojtěch Dobeš

Použij nette.ajax.js, ten rozpoznání odesílacího tlačítka řeší.

Mirda

Díky za odkaz, ale nevím jak nette.ajax.js použít pro můj účel.

Vojtěch Dobeš

Nu, nainstaluj ho podle dokumentace. Pak se používá úplně stejně, jako ten chudáček z quickstartu, tedy stačí dát odkazu/formuláři CSS třídu ajax.

Mirda

Tak jsem se k tomu zase dostal. Udělal jsem vše podle návodu a funguje to.
Teď potřebuji u konkrétního formuláře nastavit událost po submit.
Díky

Vojtěch Dobeš

Je to otázka :) ?

Mirda

Je. Byl bych rád, kdybys mi s tím pomohl.

Vojtěch Dobeš

V tom případě by to chtělo upřesnit zadání. Netuším, s čím přesně chceš pomoct.

Mirda

Jestli to chápu dobře, po nalinkování nette.ajax.js a zavedení $.nette.init() vše funguje ajaxově. Jde mi o to, jak se dostanu nějakou funkcí ke konkrétnímu submitu ve kterém si projdu od init do complete.

Vojtěch Dobeš

Stále úplně nerozumím, čeho přesně chceš dosáhnout?

Ajaxově funguje to, co má CSS třídu ajax.

Mirda

Mám formulář v modálním okně. Odešlu ho a potřebuju po úspěšné validaci a submitu zavřít modal.

Vojtěch Dobeš

Ahá… takže po ajaxovém odeslání toho formuláře by se mělo zavřít modální okno, ve kterém ten formulář je. Můžeš to udělat dvěma způsoby. Buď to odeslání iniciovat manuálně (zavěsit se prostě klasicky pomocí jQuery na ten konkrétní formulář do události submit a odeslat ho ajaxově manuálně:

$('#my-form').netteAjaxOff().submit(function (e) {
	$(this).netteAjax(e).done(function () {
		// close modal
	});
});

Anebo si udělat nějakou chytrou extension, která bude detekovat, jestli šlo o formulář, a jestli byl v modálním okně, ale přijde mi to nutně méně výkonné.

To .netteAjaxOff() tam nemusí být, pokud tomu formuláři ani nebudeš dávat CSS třídu ajax.

Mirda

Nějak se mi nedaří.

Vojtěch Dobeš

To je mi líto.

Mirda

Formuláři jsem zrušil ajax a okno se zavřelo. Ale já ho přece potřebuju mít ajaxový, jinak se nic dalšího neprovede.

Vojtěch Dobeš

Omlouvám se, ale místo vyměňování si milionu příspěvků na fóru bude lepší začít třeba ukazovat kód, o kterém se bavíme. Já jsem přeci ukázal, jak ho odeslat ajaxově.

Mirda

Takhle jsem to rozjel s jquery.ajaxform.js.

<script>
$(function () {
        $("form.ajax :submit").click(function () {

                $(this).ajaxSubmit().done(function(payload){
                if(payload.message=='ok'){
                     $('#myModal').modal('hide');
                }

                });
                return false;
        });
});
   </script>

Vojtěch Dobeš

Nu, a v čem můj kód nefungoval :)? Tam odeslání taky proběhne ajaxově. Kdybych ho teda měl úplně zkompletovat (nahradit ten komentář), tak takto:

$('form.ajax :submit').click(function (e) {
	$(this).netteAjax(e).done(function (payload) {
		if (payload.message == 'ok') {
			$('#myModal').modal('hide');
		}
	});
});

Pochopitelně znovu obalit do čekání $(function () { ....

Mirda

Díky.
Ještě jsem se chtěl zeptat na chybovou hlášku ve webové konzoli, která se týká verze s jquery.ajaxform.js.
Na formulář jsem napojil Live Form Validation. Pokud kliknu na formulářové tlačítko save a formulář není validní, objeví se v konzoli tato hláška:
TypeError: $(…).ajaxSubmit(…) is null.

Dotaz: Mám s tím něco provést? Nějak to ošetřit?

Mirda

Tak jsem to udělal takto:

<script>
$(function () {

        $("form.ajax :submit").click(function () {

               if(Nette.validateForm(this)){

                $(this).ajaxSubmit().done(function(payload){

                if(payload.message =='ok'){
                     $('#myModal').modal('hide');
                }

            });
                return false;
             }

        });
});
   </script>