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

MW napsal(a):

Zdravím,

pouzivam jquery.tooltip.js a pri pouziti:

$.nette.ext('tooltip', {
    load: function () {
	$(".tt").tooltip({
	    showURL: false,
	    track: true,
	    delay: 0
	});

    }
});

a naveseni pres class=„tt“ na odkaz, odkaz pak nefunguje. Zadna chyba, jen to neprejde. Netusite nekdo prosi, kde bych mohl hledat chybu?

Nebo jakou pouzivate podporu pro tooltip ?

EDIT: poznatek.. pokud nekliknu, ale drzim tlacito mysi na odkazu cca 2 vteřiny a pak pustim, na odkaz to prejde.. ale netusim s cim v tom tooltipu to muze byt v kolizi..

Diky

Vyřešeno.
Pokud použiju makro link:

<a href="{link Contracts:paymentsHistory ....

místo

<a n:href="Contracts:paymentsHistory ....

Tak to funguje… Má prosím někdo nějaké možné vysvetelní, proč by to mohlo zlobit?

Díky

Editoval MW (10. 1. 2013 10:10)

Zdravim, nejako sa snazim zaparcovat handle a ajaxovanie do mojej aplikacie ktoru prerabam do nette, a aj ked vacsina veci funguje, tak stale mam problem s twitter bootstrap tooltipmi a JS efektami na invalidovanych snippetoch.

moja aplikacia je tu: Qoe App

tlacitka pod jumbotronom budu sluzit na prihlasenie pomocou soc. sieti (zatial funguje iba facebook). ked uzivatel stlaci prve tlacitko, zobrazi sa mu klasicky formular na registraciu, ktory sa nacita cez ajax.

Nad tlacitkami su bootsrap tooltipy, ktore funguju iba na uvodnej obrazovke, akonahle prebehne nejaky handle, tak tieto tooltipy uz nefunguju, a a nefunguje ani ziaden iny javascript efekt nad nimi. Ajax klasicky facha aj nadalej.

latte vyzera takto:

<?php
		<!-- Login buttons -->
		{snippet login}
		<div class="login-wp">
			<div class="login-btn mal">
				<a n:href="mailLogin!" class="{$vars['loginType'] == 'mail' ? active : pasive } ajax" title="Use classic login with your email" rel="tooltip"><span>m</span></a>
			</div>
			<div class="login-btn fcb">
				<a n:href="facebookLogin!" class="{$vars['loginType'] == 'facebook' ? active : pasive }" title="Login with Facebook account <span style='color:red'><strong>Preffered</strong></span>"  data-html="true" rel="tooltip"><span>f</span></a>
			</div>
			<div class="login-btn ggl">
				<a n:href="googleLogin!" class="{$vars['loginType'] == 'google' ? active : pasive } ajax" title="Use Google account for login" rel="tooltip"><span>g</span></a>
			</div>
			<div class="login-btn twt">
				<a n:href="twitterLogin!" class="{$vars['loginType'] == 'twitter' ? active : pasive } ajax" title="Login using your Twitter account" rel="tooltip"><span>t</span></a>
			</div>
		</div>
		{/snippet}
?>

persenter handle:

<?php
	public function handleMailLogin()
	{
		$this->vars['loginType'] = "mail";

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

a javascript:

<script>
$(document).ready(function() {

	$.nette.ext('spinner', {
		init: function () {
			this.spinner = this.createSpinner();
			this.spinner.insertAfter('.jumbotron');
		},
		start: function () {
			this.spinner.show(this.speed);
		},
		complete: function () {
			this.spinner.hide(this.speed);
		}
	}, {
		createSpinner: function () {
			return $('<div>', {
				id: 'ajax-spinner',
				css: {
					display: 'none'
				}
			});
		},
		spinner: null,
		speed: undefined
	});

	$.nette.ext('init').linkSelector = 'a.ajax';
	$.nette.init();

	$('a[rel=tooltip]').tooltip();

	$('.fcb a').on("click", function(){
		var text = '<div class="alert alert-warning" id="loading">"Please wait while loading your Facebook profile...You will be redirected in couple of seconds, please do not interrupt."</div><div id="ajax-spinner"></div>';
		$(text).insertAfter('.jumbotron');
	});

});
</script>

Viete mi poradit v com moze byt problem?

EDIT
Zrejme som len nedostatocne vzdelany, ale zatial som nikde nenarazil na to ze ten JS s efektami treba dat do $.nette.ext() a potom vsetko funguje ako ma :)

Viete teda aspon zaciatocnikovi poradit, preco to tak je (pripadne nejaky odkaz s vysvetlenim) ? Dakujem

Editoval Stic (17. 1. 2013 13:33)

Ahoj,
když použiju tento skript tak se mi sice ajaxový požadavek provede, v konzoli dostanu correct odpoved a snippety v ní jsou.

Stopoval sem chování scriptu a v applySnippet se vždy $el.is(‚[data-ajax-append]‘) == FALSE.
Tím pádem je z pohledu scriptu chování nejspíše korektní, ale přoč to tak je když přidaný záznam je v JSONU se snippety vrácen?

Eště podotknu, že je chování totožné u statického i dinamického snippetu.

Díky za pomoc.

EDIT: Tak jsem zjistil, že to má něco dočinění s dinamickými snippety, vše ostatní jsem již rozchodil. Funguje to tu jinak než u starého ajax scriptu?

Editoval besir (20. 1. 2013 22:29)

@Stic AJAX, jak to má již v názvu, je asynchronní. Tudíž někdy někde doběhne nějaký ajaxový požadavek a podle jeho odpovědi se pak natvrdo hýbá se stránkou. Proto veškeré zavěšování callbacků lze v nette.ajax.js zaregistrovat jako rozšíření. Doplněk se postará o to, aby při změně HTML apod. bylor rozšíření znovu aplikováno.

Zkus si pročíst kompletní dokumentaci: https://github.com/…ette.ajax.js

@vojta no provedl se požadavek, vratila se odpoved v ni byly v pořádku všechny snippety i ty nové, ale nepřidaly se. Nakonec sem zjistil, že to souvisí s dynamickými snippety. Dal sem je pryč a snippet se překreslí. Otázkou je proč to nefunguje v dynamickými… podporuje je script vůbec?

Zdravim,
mam problém s iniciací pluginu. Zkoušel jsem vše možný, udělal jsem vše podle návodu, ale stále mi konzole píše $.nette.init is not a function.

Soubor nette.ajax.js mam normálně nalinkovanej po jQuery

<script type="text/javascript" src="{$basePath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="{$basePath}/js/nette.ajax.js"></script>
<script type="text/javascript" src="{$basePath}/adminModule/js/fce.js"></script>

Soubor fce.js vypadá následovně

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

Možná triviální otázka a chyba, ale osobně na to nemůžu přijít. Nějaké nápady?

@duskohu Za automatické zabití probíhající requestu novým je zodpovědné rozšíření unique. Pokud bys ho chtěl vypnout pouze pro konkrétní požadavek (tedy aby tento požadavek běžel paralelně k ostatní, které se nadále budou za sebou zabíjet), lze toho docílit jednoduše pomocí off:

$.nette.ajax({
	url: 'hulahop...',
	off: {
		unique: false
	}
});

@duskohu Otevřeš mi na to prosím issue na Githubu?

Muzete me nekdo navest? Zkousel sem ajax posilani formulare a tenhle js plugin a funguje to az do doby, nez pridelim pravidla formulari:

<?php
	protected function createComponentMyForm() {
		$form = new \Nette\Application\UI\Form();
		$form->addText('value', 'Value:')
			->setRequired( 'Musi byt vyplneno' );

		$form->addImage('ok', '/img/image.png', 'OK');
		$form->onSuccess[] = callback($this, 'ajaxSubmitOnSuccess');
		$form['ok']->getControlPrototype()->addClass('ajax');
		return $form;
	}

	public function ajaxSubmitOnSuccess(Nette\Application\UI\Form $form) {
		$this->payload->callbacks = array("alert('done');");
	        \Nette\Diagnostics\Debugger::fireLog($form->form->values);
		if ($this->isAjax()) {
			$this->invalidateControl('snippet');
		} else {
			$this->redirect('Page:default');
		}
	}
?>

v latte:

<script>
	$(function(){
		$.nette.init();
	});
</script>

<html>
{snippet myForm}{control myForm}{/snippet}
</html>

Pokud nedam zadny pravidlo ->setRequired( 'Musi byt vyplneno' );,
tak se vse provede ok a ajax vrati {"callbacks":["alert('done');"],"state":{"lang":"cs"}}
Pokud tam to pravidlo dam tak mi ajax vrati kompletne vygenerovanou stranku, jako by se neprovedl zadny invalidateControl..

Zajimalo by me, jaky je best practices, kdyz chci mit formular na strankach s par inputy a validaci a aby se to pri odeslani formulare validovalo na strane klienta. Po provedeni ajaxu se pak bud provede redirect nebo nabinduje jina akce (jiny js atd)

Diky!

Ahoj,

od tohoto commitu:
https://github.com/…18da27f7b17f

mi nefunguje překreslování snippetů. Hodnota xhr.status je undefined.

Editoval jiri.medved (5. 2. 2013 15:52)

jiri.medved Úplně jsem nepochopil to o těch flash zprávičkách. Každopádně, pokud se přihlášení má provést ajaxově a v případě úspěchu pak natvrdo přesměrovat, je to zcela košer. Dokonce lze na straně serveru udělat klasický $this->redirect( něco ), a nette.ajax.js provede to window.location = ... sám.

duskohu Já jsem idiot, napsal jsem ti to špatně, v dokumentaci na Githubu je to dobře:

$.nette.ajax({
	...,
	off: ['unique']
});

Zdravím,

momentálně implementuji ajax file upload pomocí jquery.form.js a implementuji ho tak, že vykreslím formulář s inputem pro soubor, který po odeslání refreshne snippet a zobrazí náhled obrázku s linkem na smazání. Zároveň ze stránky odstraní formulář. Ten link bych chtěl implementovat ajaxově pomocí nette.ajax.js, ale třída ajax zde nefunguje. Použil jsem tedy v $.nette.init live, tak jak je to na gitu, což mi funguje. Kliknutí na odkaz opět form zobrazí přes snippet, ale tentokrát je kvůli tomu potřeba nasadit live i na tom jquery.form.js.

Chci se zeptat, jestli je nějaký způsob, jak na toto napsat extension, který by spojovalo ajax.form.js s nette.ajax.js

Implementuji takto:

<script type="text/javascript">
	$(document).ready(function() {
		var bar = $('.bar');
		var percent = $('.percent');

		var options = {
			dataType: 'json',
 			timeout: 5000,

			beforeSend: function() {
				var percentVal = '0%';
				bar.width(percentVal)
				percent.html(percentVal);
			},

			uploadProgress: function(event, position, total, percentComplete) {
				var percentVal = percentComplete + '%';
				bar.width(percentVal)
				percent.html(percentVal);
			},

			success: function(payload) {
				//refresh snippets
				if (payload.snippets) {
					for (var i in payload.snippets) {
						var html = payload.snippets[i];
						$('#' + i).html(html);
					}
				}
			}
		};

		$('.ajaxForm').live('click', function(){
			$(this).ajaxForm(options);
		});
	});
</script>

<script type="text/javascript">
$(function() {
	// Initialize form validation only after all other scripts have been executed.
	$.nette.init(function (ajaxHandler) {
	    $('a.ajax:not(.no-ajax)').live('click', ajaxHandler);
	});
});
</script>

Narazil jsem na jednu věc. Když server odešle snippet, který se na aktuální stránce nenachází, script zhavaruje na: https://github.com/…ette.ajax.js#L322. Oprava je snadná. Stačí podmínku upravit na:

if ($el.get(0) !== undefined && $el.get(0).tagName == 'TITLE') {

Otázkou ovšem zůstává, jestli se má takový snippet bez varování zahodit.

@xtbman Můžeš kdyžtak nahlásit issue na Githubu (budu rád). Každopádně se na to co nejdřív podívám.

Ahoj, měl bych jeden dotaz. Lze nějak měnit before, success atd metody ale jen u konkrétního elementu? Přes rozšíření jsem si je zadefinoval ale ty se mi provádějí všude a já bych je potřeboval jen na konkrétním elementu.

@martinit: tak že nalinkuješ soubor: spinner.ajax.js tam tu extension máš.

(function($, undefined) {

$.nette.ext('spinner', {
init: function () {
this.spinner = this.createSpinner();
this.spinner.appendTo('body');
},
start: function () {
this.spinner.show(this.speed);
},
complete: function () {
this.spinner.hide(this.speed);
}
}, {
createSpinner: function () {
return $('<div>', {
id: 'ajax-spinner',
css: {
display: 'none'
}
});
},
spinner: null,
speed: undefined
});

})(jQuery);

ale musíš před initem toho ajaxu.

@martinit: a nezapomen taky na csska ;) abys ten spinner pak viděl ;)

Chceš ajaxem odeslat form ve kterém bude údaj roku a pak aby ti to udělalo redirect? Pokud jo tak by ti to měl obstarat ten ajax plugin sám, stačí když bude v payloadu ten redirect, resp v akci presenteru normálně dáš redirect ale nette samo pozná že jseš v ajaxovém volání tak info o redirectu hodí do output jsonu co dorazí do toho ajax pluginu a ten by měl provést redirect.

Pokud to ale máš jakoby filtr na vypsání hodnot, tak proč to neudělat snipettem? změníš data, invaliduješ a zpět pošleš data pro konkrétní rok?

Tak ještě k mému předchozímu dotazu zkusím to blíže upřesnit. Mám po stránce odkazy co mají načíst obsah do tabů (uičko od jquery), tj po zpracování dotazu vytvořit ouško a obsah tabu.

Pokud jsem to tady dobře pochopil tal v si vytvořím extension ve které na dané elementy nasadím akci pomocí .on. Když se zavola „klasický“ ajax bude se ta ext tabber volat znova? Je tohle správné řešení? Zatím to řeším teoreticky a dělám appku s vyplou podporou ajaxu aby jela tak i tak ;) tak mě prosím nekamenujte ;)

$.nette.ext('tabber', {
    load: function () {
        var _this = this;
        $('.tabButton').on('click', function (e) {
		var $this = $(this);
		$.nette.ajax({}, $this.find('a')[0], e).done(function (data) {
                    // Vytvoreni tabu pomoci data
                });
        });
    }
}, {
    req: null
});

kedrigern V Nette bylo vždycky zvykem, že redirect() se volá pouze pokud !$this->isAjax(). Řešením je tedy volat ho i při ajaxovém požadavku… pak se to chová tak, že přímo na serveru spustí znova onen request… již mimohandlový… a ten může vrátit snippety (snad to říkám dobře :D). Druhou možností je přiřadit do payloadu:

$this->payload->redirect = $this->link('this');

Pokud nechceš, aby se přímo na serveru vykonal cíl toho redirectu, ale jen se prostě na onu adresu změnila URL, zvol místo klíče redirect klíč url.

$this->payload->url = $this->link('this');

Když totiž na serveru žádný redirect neproběhne, nahrazuje se URL prostě podle toho odkazu, a ten extenze nijak neparsuje (nerozumí, že jde o signál).

Editoval vojtech.dobes (27. 2. 2013 16:18)

akadlec Tuším, že už jsi na to přišel, ale k tvé otázce o extension pouze pro konkrétní elementy… řeší se to vlastním listenerem a pak přímo volání $.nette.ajax. Existuje parametr (resp. datový atribut) data-ajax-off, kterým lze pro konkrétní elementy nějakou extenzi vypnout, ale jeho analogický bratříček data-ajax-on neexistuje, ani nebude :).

duskohu

$.nette.ext({
	load: function () {
		$('.editable').editable(function(value, settings) {
			var element = $(this);
 			$.nette.ajax({
				url: element.data('handleUrl'),
				data: {
					elementId: element.attr('id'),
					elementValue: value
				},
				start: function (xhr, settings) {
					var ico = element.prev('span').find('i');
					ico.removeClass('icon-pencil');
					ico.addClass('icon-upload');
				}
			});
			return value;
		}, {
			tooltip   : "Upraviť...",
			style  : "inherit"
		});
	}
});

Prosim, jak realizovat automaticke obnoveni jednoho konkretniho snippetu s vyuzitim setinterval()?

Lexi

A to volání $.nette.ajax může vypadat třeba takto:

(function () {
	function poll() {
		$.nette.ajax({
			url: ...
		});
		setInterval(poll, 5000);
	}
	poll()
})();