Po kliknutí na odkaz chvíľu počkať, až potom pustiť ajax

hoou

Zdravím, používam ajax a css animácie. Chcem, aby sa ajax zavolal až po dokončení animácie. Viem, že animácia trvá x sekúnd a tak mi napadlo, že by sa to dalo spraviť nejak tak, že po kliknutí na ajaxový odkaz, sa najprv x sekúnd počká, až potom sa zavolá ajax. Netuším ale vôbec, ako to napísať a či to je vôbec možné. Prípadne, napadá vám nejaké lepšie riešenie?

premek_k

No, podle mě bys měl využít nějakého událostního handleru – něco jako:

onAnimationFinish:
	sendAjax;

Ale na konkrétní radu jsou tu zkušenější…

Machy8

Zavolat ajax po určité době by šlo pomocí setTimeout()

$("#click").click(function(){
	var ajaxUrl = this.href,
		dobaAnimace = 2000 /*ms*/;
	setTimeout(function(){
		$.ajax({
			method: "POST",
			url: ajaxUrl
		});
	}, dobaAnimace);
	return false;
});

Editoval Machy8 (13. 3. 2016 11:27)

hoou

Noooooo toto vyzerá dobre, ale chce to ešte nejako dotiahnúť. Pekne to čaká 2 sekundy a potom mi príde odpoveď zo servera. Lenže nedochádza k prekresľovaniu snippetu. V sieťovej aktivite vidím, že mi príde to, čo chcem, ale jednoducho sa to neprekreslí. Kde môže byť chyba?

EDIT: Ešte takto. Ja som v extension init musel zakomentovať riadok:

$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);

Asi preto to neprekresľuje. Lenže keď to nezakomentujem, tak to nečaká tie 2 sekundy, ale hneď to prekreslí.

Editoval hoou (13. 3. 2016 11:44)

Machy8

A máš nalinkovaný jquery.nette.js (viz návod) před spouštěcím skriptem?

Editoval Machy8 (13. 3. 2016 11:57)

hoou

Používam nette.ajax.js od Vojtěcha Dobeša.

Machy8

Tak to nevím. Nemám s tím zkušenosti. Spíš se zeptat @VojtěchDobeš

CZechBoY

Musíš použít $.nette.ajax a ne jen klasickej $.ajax.

hoou

Wow! Funguje to! :) Ďakujem krásne. Ešte jedna otázka. Teraz to mám spravené s „a.ajax“ selectorom. Ako to isté naviazať na odoslanie formulára?

EDIT: Skúšal som toto:

$("form.ajax").on("submit", function(e){
			var ajaxUrl = this.action,
					dobaAnimace = 280;
			setTimeout(function(){
				$.nette.ajax({
					url: ajaxUrl,
					method: 'POST'
				});
			}, dobaAnimace);
			e.preventDefault();
		});

Ale nefunguje to. Ako odosielať manuálne formuláre cez ajax?

Editoval hoou (13. 3. 2016 13:02)

CZechBoY

Přidáš třídu ajax formulářovému prvku.

protected function createComponentForm() {
	$form = new Form;
	$form->getControlPrototype()->addClass('ajax');

	return $form;
}

hoou

Toto mám, len ja chcem spraviť teraz to isté. Že keď klikne na submit button, tak chvíľu počká a až potom sa odošle formulár. Cez obyčajný odkaz to funguje tak, ako to napísal @Machy8 . Teraz chcem manuálne odoslať formulár cez ajax, ale neviem ako sa to robí.

Tanadche

Tohle by mělo fungovat pro formuáře

$('#muj-form-s-animaci').on('submit', function(e) {
	e.preventDefault();
	var form = this;
	setTimeout(function() {
		$.nette.ajax({}, form, e);
	}, 280);
});

Editoval Tanadche (13. 3. 2016 14:12)

hoou

Áno funguje!!! Veľmi pekne ďakujem @Tanadche a takisto @Machy8 a @CZechBoY :)