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

bumprask
Člen | 59
+
0
-

Ono to v normálních prohlížečích funguje jak má, ale v IE8 ajaxizace neproběhne dobře, posílá vše v json a hned na to i v text/html. Půjde o nějakou specialitku IE8…

Editoval bumprask (9. 1. 2013 15:30)

MW
Člen | 615
+
0
-

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)

miler
Člen | 75
+
0
-

kudlajz napsal(a):

Aha, tak to se omlouvám.

No já to jsem to zkoušel dát normálně do:

… …

A funguje mi to.

Díky za tip, vyzkoušel jsem, ale stále stejný efekt – i když dám Cancel, smazání položky se provede. A stejně jako u předchozího kódu se mi obsah snippetu nezmění.

Stic
Člen | 28
+
0
-

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)

miler
Člen | 75
+
0
-

miler napsal(a):
stále stejný efekt

Když použiju tohle:

<script>
$(document).ready( function() {
		$('a[data-confirm]').live('click', function (e) {
                    if (!confirm($(this).attr('data-confirm'))) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        return false;
                    }
		});
});
</script>

Tak mi potvrzení akce sice funguje korektně, ale ten požadavek zase není ajaxový.

Editoval miler (18. 1. 2013 21:04)

besir
Člen | 170
+
0
-

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)

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@besir Nepochopil jsem, co ti nefunguje nebo co by mělo fungovat jinak :).

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@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

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@miler Na confirm je třeba jít trochu důmyslněji:

$.nette.ext({
	before: function (xhr, settings) {
		var question = settings.nette.el.data('confirm');
		if (question) {
			return confirm(question);
		}
	}
});
besir
Člen | 170
+
0
-

@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?

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@besir Hm, přímo je nepodporuje – kam by měl totiž ty nové snippety přidat? Snippety se aktualizují, tj. přijde nový snippet v požadavku s nějakým IDčkem, a vloží se do elementu, který má totožný atribut id. Pokud přijde snippet zcela nový, který předtím na stránce nebyl, kam ho vložit?

zapp
Člen | 32
+
0
-

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
Člen | 778
+
0
-

Cauko, vedel by si mi poradit ako zabranim aby ked poslem ajax poziadavku a nasledne druho aby mi tu predchadajucu nezrusilo? Da sa to nastavit pre konkretnu ext? Mam v tom problem lebo tlacitko na ktore je to naviazane tak sa na stranke nachadza aj viackrat, predpokladam ze treba nastavit nieco ako unique, ale neviem ako.

// data-form-params
$.nette.ext('action-send', {
    load: function () {
        var that = this;
        $('a[data-no-send-items-count]').off('click');
        $('a[data-no-send-items-count]').click(function(e){
            that.id = $(this).attr('id');
            e.preventDefault();
            var data = $(this).data('noSendItemsCount');
            if(data >0){
                var url = $(this).attr('href');
                $.nette.ajax({
                    url: url
                });
            }
        });
    }
});
Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@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
Člen | 778
+
0
-

Hmmm, dakujem, ale takto mi to nefunguje, pokial som nastavil vseobecne, tak mi to fungovalo, aj ked som mal problem v tom ze kym prebehola jedna poziadavka, tak ta druha cakala a vratilo mi to error, timeout

$.nette.ext('unique', false);

A ked som to dal len pre ext ako je hore spomenute, tak ten dalsi zabil predchadzajuci.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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

duskohu
Člen | 778
+
0
-

@vojtech.dobes Je to tam: https://github.com/…js/issues/50

neph04
Člen | 3
+
0
-

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!

JakubJarabica
Gold Partner | 184
+
0
-

Už sa vyriešilo toto? Jak udělám efekt při update snippetu?

.. efekt to urobí ok, ale kvoli delayu v animácii sa nenabindujú správne eventy na aktualizované HTML, takže ďalšie requesty nie sú ajaxové, hoc by mali.

Skúšal som dirty hack vložiť do callbacku fadeTo $.nette.init(síce by sa viackrát on/offli eventy, ale boli by tam nakoniec aj tak len raz), avšak je tam exception na viacnásobné volanie a aj keď to odkomentujem, potom sa mu nepáči niečo iné.

Ideál by asi bol(ale to aktuálne neviem s applySnippet dosiahnuť) aby sa jednotlivé animácie previedli na deferred objekty a keď budú všetky hotové, potom jednorazovo zavolať $.nette.init. Ukážka je tu: http://stackoverflow.com/…-re/13712302#…. Každopádne na to bude asi treba upraviť celú snippets extension a na to sa ani veľmi necítim a ani momentálne nemám čas :)

PS – používam aktuálnu verziu.

jiri.medved
Člen | 33
+
0
-

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
Člen | 33
+
0
-

Používám TW bootstrap a ve vyskakovacím okně (Modal) mám přihlášení uživatele. V tomto okně chci vykreslovat flashMessages. Takže jsem si do html k modalu přidal:

{snippet flashMessagesSignIn}
<div n:foreach="$flashes as $flash" class="alert alert-{$flash->type}">{$flash->message}</div>
{/snippet}

V presenteru mám:

public function signInFormSucceeded($form)
{
	$values = $form->getValues();

	if ($values->remember) {
		$this->getUser()->setExpiration('+ 14 days', FALSE);
	} else {
		$this->getUser()->setExpiration('+ 20 minutes', TRUE);
	}

	try {
		$this->getUser()->login($values->username, $values->password);
		$this->payload->status = 200;
	} catch (Nette\Security\AuthenticationException $e) {
		$this->payload->status = 403;
		$this->flashMessage($e->getMessage(), 'error');
	}

	if ($this->isAjax()) {
		$this->invalidateControl('flashMessagesSignIn');
	} else {
		$this->redirect('Homepage:');
	}
}

a pak v JS mám (pokud je uživatel v pořádku přihlášen, znovu načíst stránky, aby se modal okno zavřelo):

$('.sign-in-form').submit(function (e) {
	$.nette.ajax({
		success: function (payload) {
			if (payload.status === 200) {
				window.location = Navrch.Server.BaseUrl;
			}
		}
	}, this, e);
});

Je to tak správně, či lze použít nějaký lepší způsob?

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

jiri.medved Zkusil jsem to jinak, snad už teď master bude frčet, jak má.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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

$.nette.ajax({
	...,
	off: ['unique']
});
xtbman
Člen | 24
+
0
-

ahoj, neřešil jste někdo problém s kombinací doplňků nette.ajax.js a live form validation? Vše mi funguje správně, ale jen v „google chrome“ „live form validation“ nefunguje. V konzoli se nezobrazí žádná chyba, ale při zakomentování nette.init() funguje normálně.
Používam aktuální verzi google chrome.

darthcz
Člen | 113
+
0
-

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>
xtbman
Člen | 24
+
0
-

oprava předešlého příspěvku
v google chrome nefunguje javascriptová validace (live-form-validation.js / netteForms.js) pokud je aktivní history.ajax.js
Bohužel je nad mé síly tento problém vyřešit.

pepakriz
Člen | 246
+
0
-

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.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@pepakriz Díval jsi se na větev csrf, která není sesynchronizovaná s masterem. Tento problém už je vyřešen.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

@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.

Jan@W
Člen | 1
+
0
-

Zdravím, už nevím co stím. Snažím se přinutit poslední release 1.2.x history.ajax.js https://github.com/….2.x/history
aby nastavil history.pushState po odeslani odeslaní formuláře(method=„get“), ajax funguje bez problému, snippety se překreslí jak mají.

u

<a href="neco" class="ajax">neco</a>

href do historie nastaví, ale u formuláře bohužel nikoli

Implementace vypadá následovně:

<form action="/index/" method="get" id="frm-sliderForm" class="ajax" novalidate="">
	<input type="hidden" name="do" value="sliderForm-submit">
	<input type="hidden" name="minPrice" id="frmsliderForm-minPrice" value="410">
	<input type="hidden" name="maxPrice" id="frmsliderForm-maxPrice" value="880">
</form>
<script>
$(function () {
	$("#priceSlider").slider({

		// ......
		change: function(event, ui) {
			event.preventDefault();
                	$("#frm-sliderForm").submit();
		}
	});

	$.nette.init(function (ajaxHandler) {
		$('a.ajax:not(.no-ajax)').live('click', ajaxHandler);
		$('form.ajax').live('submit', ajaxHandler);});
		$("img.lazy").lazyload({ effect : "fadeIn" }).removeClass("lazy");
	});
});
</script>

děkuji předem všem kdo mi dokáže pomoci.

EDIT:
Tak jsem na to přišel, chyběl redirect po zpracování hodnot ve formuláři

$this->redirect('this');

Editoval Jan@W (22. 2. 2013 21:12)

akadlec
Člen | 1326
+
0
-

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.

MartinitCZ
Člen | 580
+
0
-

Prosimtě, jak mám použít a spustit spinner extension? Nikde tu není zmínka o tom, jak se s těmito extension pracuje.

Díky.

akadlec
Člen | 1326
+
0
-

@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.
MartinitCZ
Člen | 580
+
0
-

@**akadlec**: Díky :) Já myslel, že se tam bude ještě nastavovat plno věcí ;)

akadlec
Člen | 1326
+
0
-

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

MartinitCZ
Člen | 580
+
0
-

@**akadlec**: JJ to už je jasný :)

Jak měnit URL?
Mám formulář s jedním selectboxem, který obsahuje roky (…, 2012, 2013 ..).
Je nastavený tak, že když se změní hodnota, tak se automaticky odešle a zpracuje.
Zpracování je jednoduché, jelikož jde jen o redirect:

$this->redirect("List:default", array("year" => $form->getValues()->year));

Tohle je problém odeslat ajaxem, jelikož se nezmění url prohlížeče a tak se nezmění obsah stránky.
Podle parametru v URL se upravuje dotaz na db, jež bude obsahovat daná data.

Jak toto řešit?

Děkuji.

akadlec
Člen | 1326
+
0
-

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?

MartinitCZ
Člen | 580
+
0
-

@**akadlec**:
Když ve zpracování formu nechám jen toto, tak obsah překreje tim spinnerem a chvilku poté se provede redirect.

$this->redirect("List:default", array("year" => $form->getValues()->year));

Pokud to upravim na toto, tak je výpis dat pořád stejný.

if ($this->isAjax()) {

	$this->invalidateControl("flash");
	$this->invalidateControl("content");

} else {

	$this->redirect("List:default", array("year" => $form->getValues()->year));

}

Editoval martinit (25. 2. 2013 15:33)

akadlec
Člen | 1326
+
0
-

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
Člen | 102
+
0
-

Zdravím,

předem upozorňuji, že si s JS moc netykám.

Nicméně jsem použil tento skvělý doplněk a ve spolupráci s handly úspěšně zajaxoval velký kus stránek. Pak jsem nasadil extension spinner a také super. Vše dle mých velmi prostých očekávání.

Nicméně pokud vše provádím jen ajaxově (via nette.ajax.js), tak se nemění adresa (což je správně, že?). Nainstaloval jsem history.ajax.js (nalinkoval soubor, dodal php extension). Nyní adresa zůstává. Nicméně zůstává např. i parametr do=nejakyHandle, což je špatně, ne? Správné by bylo zachovat proměnné, ale už ne handle.

Kód vypadá např. takto:

<?php

class SnipetyPresenter extends BasePresenter
{
    public function renderDefault()
    {
        $this->template->now = date('r');
    }

    public function handleUpdate($var)
    {
        $this->template->now = date('r');
        $this->template->var = $var;

        if($this->isAjax()) {
            $this->invalidateControl('s');
        } else {
            $this->redirect('this');
        }
    }
}
{block content}
<p><a n:href="update! 'abcdef' " class="ajax">UPDATE!</a></p>
<p><strong>{$now}</strong> Úvodní odstavec zobrazený prezenterem.</p>
{snippet s}
<p><strong>{$now}</strong> odstavec, který je ve snippetu 's'</p>
<p n:if="isset($var)"> odstavec, který je zobrazen pokud je definovaná proměnná $var: {$var}</p>
{/snippet}

Je to správné chování? Nebo mám nějak to history.ajax.js nastavovat? (třeba co má vyhodit z adresy)

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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)

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

akadlec Myslím, že na to jdeš dobře… jen pozor, že (jak správně uvádíš) load se volá po každém úspěšně doběhlém požadavku, tak aby se ti na ty odkazy nenavěsil ten callback vícenásobně…

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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
Člen | 778
+
0
-

Ahoj, skusal som si rozchodit jeditable , tak som si to hodil do extenze, v ktorej posielam poziadavku ajaxovo, ale pred odoslanim este potrebujem zavolat before, problem je v tom ze ten before sa mi vola pri kazdom ajaxovom volani. Neviem ako to mam naviazat len na tuto extenziu. Nevies mi poradit ako na to?

$.nette.ext({
    load: function () {
        var that = this;
        $('.editable').editable(function(value, settings) {
            that.element = $(this);
            $.nette.ajax({
                url: $(this).data('handleUrl'),
                data: {
                    elementId: $(this).attr('id'),
                    elementValue: value
                }
            });
            return value;
        }, {
            tooltip   : "Upraviť...",
            style  : "inherit"
        });
    },

    before: function (settings) {
        var ico = this.element.prev('span').find('i');
        ico.removeClass('icon-pencil');
        ico.addClass('icon-upload');
    }


});
Vojtěch Dobeš
Gold Partner | 1316
+
0
-

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"
		});
	}
});
duskohu
Člen | 778
+
0
-

@vojtech.dobes dakujem

Jan Mikeš
Člen | 771
+
0
-

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

jiri.pudil
Nette Blogger | 1028
+
0
-

V daném intervalu budeš volat $.nette.ajax na signál, ve kterém si invaliduješ konkrétní snippet.

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Lexi

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

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