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

A v čem je to problém :) ?

Zdravim

Daju sa nejako predavat parametre rozsireniam? Ide mi o to urobit rozsirenie „uniq“ ktore nebude udrziavat globalne iba jeden ajax dotaz, ale pri volani si ajax otagovat a rozsirenie by udrziavalo jedno volanie pre kazdy tag. Pozeram do kodu a neviem ako by som to napisal. Nenapada to niekoho?

Ještě k té dvojité validaci – jednou to tam vleze přes nette.ajax.js, ale podruhé už čistě přes netteForms, tak že by byl problém tam?

Vdaka vyskusam.

Inac je nejaky dvovod, preco sa pri tahani cez bower ingoruje folder extension? Rozsirenia i bower chcem pouzivat preto mi to nedava zmysel, aby som ich „rucne“ stahoval extra.

Keby niekto potreboval ten selectivny unique tak som to urobil takto:

https://gist.github.com/…peto/9936055

Je potrebne ale vypnut povodne uniqe rozsirenie.

Pouzitie:

<script>
$.nette.ajax({
	uniqueTag: 'getComponentForm',
	url: url,
	data: {
		componentId: componentId
	}
});
</script>

Editoval matopeto (2. 4. 2014 17:12)

Jak správně uděla vlastní nette.ajax call? Potřebuju vlastní before a success akci. Zkouším toto a nějak to nefunguje dle mých představ :(

$.nette.ajax({
	validate: false,
	before: function(){
		// Hide waiting message
		$(".submit-message", form).addClass("submitting");
	},
	success: function(){
		// Hide waiting message
		$(".submit-message", form).removeClass("submitting");
	}
}, this, e);

before se mi nespustí a validace formu se provede taky dvakrát :(

Všechny události extenzí, které se vážou ke konkrétnímu requestu, dostávají jako argument objekt settings. Spouštějící element lze najít zde:

function (payload, status, xhr, settings) {
	var el = settings.nette.el;
}

Formulář v dialogu – zdravím formulář s class=„ajax“ funguje bez problému, ale pokud ho mám v dialogu (jquery ui) nahraný ze serveru, proběhne bez ajax ovladače … lze po nahrání html do dialogového okna aktivovat ajax i pro tento „aktivní“ formulář?
Děkuji
JN

Ahoj, jde nějak globálně vypnout inicializace validace formuláře? Možná jsem to jen přehlídnul, každopádně jsem našel jen „ruční“ způsob a to buď data atributem „data-ajax-validate“ nebo klíčem {validate: {form: false}}.

Ono technicky vzato nic jako ajaxové odeslání formuláře neexistuje. Existuje ajaxový požadavek typu POST vyvolaný v závislosti na odeslání formuláře. A stejně tak uvažuje nette.ajax.js.

Pokud je formulář „zajaxován“, stačí na něm vyvolat událost submit. Alternativně lze zavolat $(‚form‘).netteAjax(e, options); .

Řekl bych, že to má být takto:

$(content).append(
    $('<a/>', {
        href: "signal!",
        class: 'ajax'
    }).on('click', function (e) {
	e.preventDefault(); //neodesílat odkaz klasicky
        $.nette.ajax(this.href, this, e).done(function () {
            alert('done');
        })
    })
);

A možná by bylo nejlepší navázat event na společného předka (čili asi content). To samozřejmě mimo append:

$(content).on('click', '.ajax', function(e){
  $.nette.ajax(this.href, this, e).done(function () {
    alert('done');
  })
});

$(content).append($('<a/>', {
        href: "signal!",
        class: 'ajax'
}));

Editoval Michal Vyšinský (16. 6. 2014 16:51)

@vojtech.dobes Muzu se prosim zeptat jak je to s history.ajax.js a chybou v NS_ERROR_ILLEGAL_VALUE pushState()?

Resenim je teda u parametru UI plnit prazdne pole? viz predesla stranka

Diky

Edit: Tak to je sice reseni ze to nepada, ale pak nefunguje tlacitko Back – resp se meni jen URL v adres baru nemeji se obsah stranky. Co tam pouzit nejakou kompresi?

Editoval Kurtas (23. 6. 2014 13:30)

Niekto nejaky napad, preco mi nechce fungovat confirm extensia ?
Pri kliknuti na odkaz sa zavola prislusna before obsluha, ale nedostane settings.nette a tym padom hned skonci …
Takze bez opytania mi odmaze polozku :(

<div n:snippet="foo" data-super-effect>
	...
</div>

var originalApplySnippet = $.nette.ext('snippets').applySnippet;
$.nette.ext('snippets').applySnippet = function ($el, html) {
	if ($el.is('[data-super-effect]')) {
		$el.fadeTo('fast', 0.01, function () {
			$el.html(html).fadeTo('fast', 1);
		});
	} else {
		originalApplySnippet($el, html);
	}
};

Používám jednoduchý skriptík na refresh a přepočítání hodnot vložených do formuláře:

		$.nette.ext('onchange', {
			load: function () {
				$('input, .quantity button').on('change input click', function () {
					$('button[name=recalculate]').click();
				});
			}
		});

Problém je, že se s provedenými akcemi (change input click) hromadí identické requesty, které jsou vzápětí storovány resp. na ně nepřichází odpověď. Vždy co akce to jeden ihned stornovaný request navíc. Po těch nepovedených se nakonec jeden úspěšně provede. Čím to může být?

Editoval Climber007 (30. 7. 2014 1:23)

To je samozřejmě správně. Mně jde o to, proč se tam ty requesty vůbec vytvoří a hromadí, když provedu pouze jednu akci.

Editoval Climber007 (30. 7. 2014 8:37)

Vůbec. Jednou kdesi na začátku mám $.nette.init() a potom jen toto. Bohužel čím víc požadavků obsloužím (a tím pádem je šíleně moc těch nedoběhnutých) tím jsou další pomalejší.

Šla by má obsluha submitu formuláře udělat jinak, abych mohl vyloučit nebo lépe lokalizovat chybu/problém? Stačí něco primitivního a může to být na klasický submit.

Solved: Už vím kde je problém. Měl jsem celý formulář .ajax + jsem vytvářel requesty tím $.nette.ext() takže se to kdo ví jak duplikovalo a množilo.

Editoval Climber007 (30. 7. 2014 22:11)

@Climber007:

1. Tak řek bych že je asi jedno kolik ext tam bude, jen to chce s rozvahou abys nezasekal paměť prohlížeče.
2. To co chceš ty není v nette.ajax.js přímo. Taky jsem to chtěl a nakonec jsem se dopracoval společně s @vojtech.dobes k závěru kdy se ty ext. přidávají podle elementu. Mám to cca nějak takto:

Pomocí této funkce provedu podmíněnou registraci ext. Při vytvoření requestu se ověří zda element který jej vyvolal obsauje data atributu data-ajax-on a je v něm uveden název ext. Pokud tomu tak není tak se ext z requestu vyřadí.

/**
 * Conditional including of extensions
 *
 * @param string name
 * @param object events
 * @param object context
 */
function addConditionalExtension(name, events, context) {
	$.nette.ext(name, $.extend(events, {
		prepare: function (settings) {
			var ajaxOn = settings.nette.el.data('ajax-on');

			if ( !settings.nette || !ajaxOn instanceof Array || $.inArray(name, ajaxOn) < 0 ) {
				if ( !settings.off ) {
					settings.off = [];
				}

				settings.off.push(name);
			}
		}
	}), context)
}

No a pak jednotlivé ext přidávám pomocí té funkce:

/**
 * Avatar upload
 */
addConditionalExtension('avatarUpload', {
	init: function() {
		//....
	},
	success: function (payload, status, xhr, settings) {
		//....
	}
});

Editoval akadlec (31. 7. 2014 9:23)

@Climber007: to ti právě zajistí ten data atribut:

<a href="?do-totok" class="ajax" data-ajax-on="['nazevExt1', 'nazevExt2',...]">Upload</a>

a protože ty ext jsou připojeny podmíněně, tak předtím než se požadavek odešle se provede kontrola zda je možné danou ext použít. Co dělá ta funkce addConditionalExtension je to že ti to jednoduše registruje extension ale přidává tam ještě navíc metodu prepare která právě zajistí to že se daná ext použije jen tehdy když má.

Přišel jsem na to, že mi karta s aplikací zabírá po delší době i stovky MB v paměti. POtom jsem zjistil, že to dělá pouze tato část extension:

load: function () {
	spinner = $('<div></div>', { id: "ajax-spinner"});
	spinner.html('<div><i class="fa fa-spinner fa-spin"></i></div>');
	spinner.appendTo(".suma");

	$('button[name=recalculate]').css({
		display: 'none'
	});
}

Kam by bylo vhodné tohle přesunou, aby aplikace pořád nekynula? Rád bych to dal pod init, ale tam se to provede jen jednou (překreslí se mi ta část, ke které se to připojuje), a při dalším requestu už se to nezavolá. Jaký je tedy ještě rozdíl mezi init a load?

Editoval Climber007 (1. 8. 2014 23:03)

Nazdárek,
mám následující problém:
V JS mám tlačítko generované knihovnou pro Leaflet. To je definované v .js souboru spolu se svým chováním. Po použití akce, která je na něj navěšená, potřebuju zavolat handle komponenty, a nevím, jak co nejlépe dostat do toho requestu URL. Jediné, co mě dosud napadlo (a funguje, ale prostě mi to přijde jak škrábání levou nohou za pravým uchem), je v šabloně komponenty tohle:

<script>
    var url = {link Click!};
</script>

A v .js souboru pak po události zavolat:

$.nette.ajax({
        type: 'get',
        url: url,
        data: {
            'y': 2,
            'x': 2
        }
    });

Nedá se to udělat nějak elegantněji?

Otázka pro všechny: měly by být extensions z repositáře zařazeny do Bower balíčku? Aktuálně v něm nejsou přítomny.

Mam problem s validaci formulare, viz https://forum.nette.org/…eho-tlacitka#…

Aktualizoval jsem nette.ajax.js, verze co jsem mel predtim (velikost 136360b) ok, verze s velikosti 14668 stahnuta 11.9. mi zpusobuje problem popsany v postu vyse.

Ahojte,

chcel by som sa poradit, ako co najlepsie vyriesit zapinanie/vypinanie data-ajax-append pri snippete podla toho, ktorym linkom bol ajaxovy request vyvolany.

Priklad:

<div n:snippet="products" data-ajax-append="true">
...
</div>

<a n:href="loadMore!" class="ajax">viac</a>
<a n:href="filter!" class="ajax">filtruj</a>

Po kliknuti na link „viac“ by sa mali data v snippete appendovat, po kliknuti na „filtruj“ by sa mal snippet prekreslit cely bez appendu.

Dakujem za radu.

@Quinix Jo funguje :) Take lahke riesenie mi nenapadlo, dakujem.