nette.ajax.js – alt. obsluha pro AJAX s jQuery

@vojtech.dobes: Na základě tvé ukázky jsem vytvořil řešení, jaké bych si představoval. (Za kvalitu JS se omlouvám)

$.nette.ext('unique', {
	start: function (xhr) {
		var logger = this.ext('uniqueLogger', true);
		$.each(logger.requests, function (i, xhr) {
			xhr.abort();
		});
		logger.reset();
	},
	complete: function () {
		this.ext('uniqueLogger', true).reset();
	}
});
$.nette.ext('uniqueLogger', {
	start: function (xhr) {
		this.requests.push(xhr);
	}
}, {
	requests: [],
	reset: function() {
		this.requests = new Array();
	}
});

V podstatě jsem jen vyjmul logování do samostatné extense, což přináší širší prostor k nastavení:

• $.nette.ajax({…}); – přeruší předešlé zalogované požadavky a spustí nový
• $.nette.ajax({…, off: [‚unique‘]}); – spustí nový požadavek, nepřeruší ostatní
• $.nette.ajax({…, off: [‚uniqueLogger‘]}); – přeruší předešlé zalogované požadavky a spustí nový, sám sebe neloguje, garance, že nebude přerušen
• $.nette.ajax({…, off: [‚uniqueLogger‘, ‚unique‘]}); – spustí požadavek, nepřeruší ostatní a sám sebe nezaloguje

Co si o tom myslíš?

Zdravim, vopred sa ospravedlnujem ze noobsku otazku, ale v JS sa moc neviznem…

mam rozbehane nette.ajax.js, vsetko funguje jak ma!
avsak potreboval by som dorobit takuto vec: ak kliknem na link kt. ma classu fooBar tak nech sa mu pred odoslanim ajaxu prida dalsia class fooBaz

dakujem

Glottis napsal(a):

cao, nejak takto

aha dik… ja som sa to snazil napchat do toho ‚before‘ eventu…

Ahoj,

mam problem s viacnasobnou validaciou AJAXovych formularov. Chcel by som sa opytat na riesenie tohto problemu.

• stiahnem sandbox (Nette 2.1-dev, z 2013–04–26 10:47:21)
• v HomepagePresenter.php vytvorim formular, ktory ma iba $form->addText("text")->setRequired(); a submit
• v @layout.latte je nalinkovane zo sandboxu jQuery (1.8.2), netteForms.js, nette.ajax.js (1.2.2), main.js, v ktorom je inicializacia $(function () { $.nette.init(); });

Pri neAJAXovom odosielani prebehne vsetko v poriadku, ked je input prazdny, validacia sa vykona len raz.

No pri AJAXovom odosielani a prazdnom inpute sa validacia vykona trikrat a z toho dvakrat v console je chyba

ReferenceError: event is not defined @ .../sandbox/www/js/netteForms.js:336

Ku chybe dochadza na riadku e = e || event; v Nette.initForm = function(form) { ... };

Tu je sandbox.

eval before and eval after
Zdravím, rád bych si napsal doplněk, který by vykonal něco „před updatem snippetů“ a druhý „po updatu“. Ale skončil jsem na
$.nette.ext(‚evalAfter‘, {
success: function (payload) {
if (payload.evalAfter) {
eval(payload.evalAfter);
return false;
}
}
});

• provede evalAfter, ale nejsem schopen řídit, jestli před/po update snippetů – nějaký nápad, jak to zajistit/ovlivnit pořadí průběhu doplňků?

Díky
JN

@duke no právě na tom jsem ztroskotal, jak zajistit, aby se událost success zpracovala nejprve novým rozšířením před frontou u snippets … a nevím co s tím

@duke To nastavení v success je spíš takový reset. Trik je v tom, že při zpracování snippetů bude shouldTry na začátku vždycky true. Pokud se podaří scroll, tak se nastaví na false (aby se nescrollovalo víckrát), a v success už se hodnota zase jen nastaví na true pro další budoucí request.

Zdravim,
pouzivam History extension a nasledujúcu fintu pri zmene obsahu snippetu:

<script>
$.nette.ext('snippets').applySnippet = function ($el, html) {
   $el.fadeTo("fast", 0.01, function () {
      $el.html(html).fadeTo("fast", 1);
   });
};
</script>

Vsetko funguje jak ma. Problem nastane ak v historii prehliadaca pouzijem BACK a nasledne FORWARD.
Pri pouziti BACK sa zobrazi predchadzajuci obsah presne tak, jak ma. No pri FORWARD sa uz ale nezobrazi ten povodny, ktory bol v snippete pred pouzitim BACK.

Problem je zrejme v tom, ze snippet zmeni svoj obsah az po case potrebnom na vykonanie prvej funkcie fadeTo(). History extension si ale zaznamena obsah snippetov este pred tym ako sa tato funkcia/animacia ukonci.

Nechce sa mi verit ze som sam co to spozoroval. Preto dufam, ze už dávno máte jednoduché riešenie ako túto situáciu eliminovať.

Takový rychlý dotaz ohledně data atributů. Mám odkaz u kterého potřebuju vypnout jak history tak i scroll tak sem zadal:

<a href="#" class="btn btn-primary btn-icon glyphicons pencil pull-right ajax" data-ajax-off="history scroll"><i></i>Add or edit</a>

a nežere to. když vypnu jen history či jen scroll tak je to ok ale dva to neveme. Co dělám blbě?

Perfektní, funguje. Já zkusil verzi se složenýma závorkama ale s hranatýma mě nenapadla ;)

JAM3SoN: Ta chyba, kterou popisuje, byla vyvolána změnou netteForms.js, a je aktuálně opravena jak na straně tohoto skriptu, tak na straně Nette. Takže doufám, že je to ok.

Ahoj, mam otazku. Neviem ci idem spravnou cestou. Mam komponentu ktora sa v intervale invaliduje. Problem je v tom ze pri invalidovani sa automaticky invaliduju aj dalsie snippety ktore su na stranke. Napr mam modalne okno v snippete vyvolam Ho handle s nejakym parametrom a vykreslim. Ale ked sa mi nasledne invalidne ta komponenta ktora sa invaliduje v intervaloch, prirodzene mi to okno zmizne. A ja neviem ako tomu zabranit. Da da nastavit komponenta aby invalidovala len jeden snippet na stranke a ostatne neriesila? Alebo to mam riesit inak?
// komponenta ktora sa v intervaloch invaliduje

(function ($, undefined) {
    $.nette.ext({
        success: function (payload) {
            if (typeof payload.checkNewOrderCount !== 'undefined') {
                var count = $('[data-order-notification]').find('.count');
                if (count.html() != payload.checkNewOrderCount) {
                    count.html(payload.checkNewOrderCount);
                }
            }
        },
        load: function () {
            var obj = $('[data-order-notification]').data('orderNotification');
            setTimeout(function () {
                $.nette.ajax({
                    url: obj.handle
                });
            }, 60000);
        }
    });
})(jQuery);

v render mam:

if ($this->isAjax()) {
	$this->invalidateControl();
}

este som uvazoval skor nad tym ci sa neda nastavit aby pri ajax volani neinvalidovalo nijaky snippet.

A kdyby se ti i přes postup co píše @Glottis nějaké invalidovali tak je můžeš zase zpětně validovat

$this->validateControl("mujSnipet");

@akadlec dik, toto sa mi viac paci :-)

Zdarec,

tak nejak som narazil na problem – mam twitter bootstrap modal okno kde mam formular, ktory sa ma odoslat Ajax-ovo.

Ked vsak pouzijem nette.ajax.js kniznicu, spolu s bootstrap.js a nette.forms.js, tak nette forms sa pravdepodobne snazi validovat inputy ihned ako niekde kliknem.

Teda v praxi to vyzera tak, ze hned prvy ipnut je povinny, no neda sa do neho ani kliknut lebo hned vyskoci pop-up okno ze som nevyplnil title. pre ostatne inputy sa to opakuje, je to teda uplne nepouzitelne…

Teraz neviem ci je problem v nette.forms ktory koliduje s bootstrapom, alebo nette.ajax ktory koliduje s bootstrapom (ked odstranim .ajax triedu z tlacitka na odoslanie, vsetko funguje ako ma, teda samozrejme okrem ajax-odoslania :) )

EDIT: nevermind, vyriesene prechodom na najnovsiu verziu

Editoval Stic (6. 6. 2013 23:21)

Stic: Tak to jsem rád, znělo to děsivě :).

duskohu: To bude asi kvůli tomu, že nette.ajax.js tu událost automaticky zabíjí, očekává, že je to událost kliknutí na odkaz nebo tak něco. To lze obejít pomocí datového atributu, což by neměl být takový problém obejít. Stačí před tím voláním přidat:

$(this).attr('data-ajax-pass', true);

Editoval vojtech.dobes (7. 6. 2013 19:48)

@vojtech.dobes dakujem, toto ide paradne :-)

Úplně nechápu, co by ten kód měl dělat? Na extenzi se nedá volat žádné complete.

Volání $.nette.ext('spinner') přece ale nevrací nic, na čem by se dala volat metoda complete.

nejsem si jisty jestli tento plugin umi něco takového

<script>

jQuery(document).ready(function($) {
	$('input.onEnterFireMe').each(function() {
		var element = $(this);
		var form = $(element).parents('form').get(0);
		$(form).keypress(function (e) {
			if (e.keyCode == $.ui.keyCode.ENTER) {
				e.preventDefault();
				element.trigger('click');
			}
		});
	});
});

</script>

jde o to, že google chrome a safari, neumí identifikovat button kterým má odeslat formulář při stisknutí enteru, nějaké verze IE s tím mají problém, ostatní prohlížeče zvolí jako cílový submit ten první v kódu, což také nemusí být žádoucí, řeším tedy něco co už je vyřešeno, nebo tohle patří do skriptu?

hm no tak bez tohodle enterem formular neodesles, pripada mi ze to patri k obsluze formularu, ale tak ok, me prislo vyhodne to dat k tomuto skriptu, protoze vsude kde nacitam tento skript tak to potrebuji

ale pochopil jsem že ten plugin nic takoveho neresi

Nikdo žáden tip?

@mcmatak: ne, to není to co potřebuju, nechci nahrazovat celý kus kodu ale zavolat si nějakou akci. Libilo by se mě kdyby se dalo pomocí nějakého data atributu definovat jaka extension nette.ajax by se měla spustit po vykonani třeba nějak takto:

<a href="zpracuj!" class="ajax" data-onsuccess="mojeext">zpracuj</a>

a pak mít v js:

$.nette.ext('mojeext', {
    type: lazy,
    success: function () {
	alert('Já jsem se spustil až po ajaxu');
    }
});