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

akadlec

@vojtech.dobes: Měl bych na tede jeden dotaz. Jde v podstatě o předešlé dotazy co jsem zde pokládal o dodělání data-ajax-on a toho posledního dotazu. Chtěl si po mě nějaké argumenty nebo příklady proč by se ta on funkce měla dodělat.

Takže uvedeu příklad. Mám stránku kde mám vypsáno několik malých datagridů, dejme tomu 10. Z každého datagridu můžu dělat editaci záznamu. Jelikož se jedná o malé záznamy mám to vyřešeno do modálního okna a to tak že zavolání editačního linku se mě do layoutu vloží form který je pak pomocí extension předělán na modální okno.

V okně provedu editaci záznamu a kliknu na uložit. Záznam se mi uloží a v tomto okamžiku bych právě využil ten druhý atribut data-ajax-on kde bych zadefinoval nějakou ext co by se spustila právě jen v tomto okamžiku a dal bych si zde volání refreshe konkrétního datagridu. Takto by jsem si mohl nadefinovat ext pro jednotlivé datagridy aby se mohly postupně refreshovat v případě potřeby.

Co ty na to? Nestojí to za implementaci?

A další věc. Tento problém jsem zatím vyřešil poupravením na snippety a menší duplikace kodu a zatím to funguje jak potřebuju, jen to není takové elegantní řešení protože na datagridy mám DataTables a s těmi se dá poměrně solidně pohrát.
A teď ten dotaz ;) ty datatables natahuji jednotlivé záznamy na pozadí později a tady jak jsem již psal před několika týdny, mám problém s tím že né vždy se navěsí ajaxová akce, takže jsem přidal volání initu po vykreslení:

$.nette.load();

Jen tedy moc jsem ten nette.ajax.js nezkoumal zda tam nedojde nějakému vícenásobnému navěšení, nebo performace issues atd.

Jan Mikeš

Caute, mam takovy dotaz, stale mi zpusobuje problemy extension confirm:

	$.nette.ext('confirm', {
		before: function (xhr, settings) {
			var question = settings.nette.el.data('confirm');
			if (question) {
				return confirm(question);
			}
		}
	});

V latte volam:

	<script type="text/javascript">
		$(function() {
			$.nette.ajax({
				url: {$presenter->link("getHotelStatus!")},
				off: ['spinner']
			});
		});
	</script>

Jenze dostavam TypeError: settings.nette is undefined, var question = settings.nette.el.data('confirm');

Da se to vyresit nejak bez toho, abych musel $.nette.ajax() predavat druhy a treti parametr, nebo vypinat pokazde extension confirm pokud jej nechci pouzit? Je to ponekud nezadouci chovani :(

Edit: napadaji me 2 mozna reseni, 1) nevim jestli toto je uplne realne, ale je mozne, aby se extension funkce dostala k elementu jinak nez pres nette.settings? Protoze kdyz se vola $.nette.ajax rucne bez predanych parametru, tak tam ten element proste neni (nenapada me jak to udelat). 2) do extension confirm pridat overeni, jestli je element opravdu nastaven, else return true; – toto pouziji asi jako docasne reseni

Edit2: Trosku jsem extension upravil a toto funguje spolehlive

	$.nette.ext('confirm', {
		before: function (xhr, settings) {
			if (settings.nette !== undefined && settings.nette.el !== undefined) {
				var question = settings.nette.el.data('confirm');
				if (question) {
					return confirm(question);
				}
			}
		}
	});

Takze ted otazka zni, pokud chci pouzit extension, ktera potrebuje pristup k elementu, tak pri rucnim volani $.nette.ajax() ten element musim opravdu vzdy predavat? (lehce jsem na to zapomnel :) )

Editoval Lexi (5. 7. 2013 6:47)

Vojtěch Dobeš

Lexi: šlo o chybu, extension confirm jsem opravil :).

akadlec

@vojtech.dobes: Aktuální verze v master větvi má v sobě chybu.....

Vojtěch Dobeš

akadlec: O jakou chybu jde?

akadlec

@vojtech.dobes: řádek 195 , or ) expected

Vojtěch Dobeš

akadlec: Díky, fixed :).

akadlec

@vojtech.dobes: nz ;) hele další z mnoha dotazů ;) dá se nějak v extension metodě success dostat k elementu na kterém to bylo vyvoláno? Chci v onSuccess metodě zavírat okno co mám otevřené tak bych tam chtěl nějak dostat element který volal ajax a pak se dostat k jeho modal parentu který dám close.

Něco takového:

$.nette.ext('closeWindow', {
	success: function (payload, status, xhr) {
		$el.parent('.modal').modal('close');
	}
});

Majkl578

@akadlec: +1, přesně něco takového jsem potřeboval minulý týden. Ideálně ne jen pro success, ale pro všechny metody.

Etch

@akadlec: +1, taky jsem to asi před měsícem řešil a pak už jsem z toho byl tak „unaven“, že jsem to udělal na prasáka pomocí:

$this->payload->closeModal = 'id_modalu';

a v onSuccess si to pak podle toho ID zavřu. Naštěstí těch modalů tolik nepoužívám, ale stejně by se mi něco podobného hodilo. :D

Jan Mikeš

Pres settings.nette.el vam to nefunguje? Viz extension confirm, ktera ziskava data-attribut z elementu na ktery bylo kliknuto. Je potreba predavat druhy a treti parametr pro $.nette.ajax()

Edit: Ah uvedomil jsem si ze settings se predavaji pouze do before a start, tak co treba takhle:

$.nette.ext({
	before: function (xhr, settings) {
		if(!settings.nette) {
			return;
		}
		this.el = settings.nette.el;
	},
	complete: function() {
		if (this.el) {
			this.el.parent('.modal').modal('close');
		}
	}
}, {
	el: null
});

Editoval Lexi (8. 7. 2013 5:32)

akadlec

@Lexi: paráda, funguje, jen tedy to získání parent elementu jsem musel přesunout do before protože v success to bylo jakoby vykouslé z DOMu:

$.nette.ext('closeWindow', {
	before: function (jqXHR, settings) {
		if ( settings.nette && settings.nette.isSubmit && settings.nette.el.attr('name') == 'send' && settings.nette.el.closest('.modal[role=dialog]').exists() ) {
			this.modalWindow = settings.nette.el.closest('.modal[role=dialog]');
		}
	},
	success: function (payload) {
		if ( this.modalWindow ) {
			this.modalWindow.bmodal('hide');
		}
	}
}, {
	modalWindow: null
});

Etch

Zdravím měl bych takovej „specifickej“ problém a to přesně že nejsem schopen nějak inteligentně rozchodit ajaxovej formulář v modal okně. Lépe řečeno ji nejsem schopen rozchodit nějak normálně (Buď nejde ajax nebo pro změnu validace nebo se validace zas provede dvakrát).

@layout.latte

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="robots" content="{$robots}" n:ifset="$robots">

	<title>{#title|striptags|upper}Nette Application Skeleton{/#}</title>

	<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css">
	<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/bootstrap/bootstrap.css">
	<link rel="stylesheet" media="print" href="{$basePath}/css/print.css">
	<link rel="shortcut icon" href="{$basePath}/favicon.ico">
	{#head}{/#}
</head>

<body>
	<script> document.documentElement.className+=' js' </script>

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

	{include #content}

	{#scripts}
	<script src="{$basePath}/js/jquery.js"></script>
	<script src="{$basePath}/js/netteForms.js"></script>
	<script src="{$basePath}/js/nette.ajax/nette.ajax.js"></script>
	<script src="{$basePath}/js/bootstrap/bootstrap.js"></script>
	<script src="{$basePath}/js/main.js"></script>
	{/#}
</body>
</html>

main.js

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

HomepagePresenter.php

class HomepagePresenter extends BasePresenter{

	protected function createComponentTestComponent(){
		return new \FormComponent();
	}
}

default.latte

{#content}
<a role="button" n:href="modal" class="btn fire-modal"
   data-toggle="modal"
   data-target="#modal"
   data-backdrop="static">Modal</a>

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3 id="modalLabel" class="modal-label">Test</h3>
	</div>
	<div class="modal-body">
		<p></p>
	</div>
	<div class="modal-footer">
		<a id="modal-cancel-button" href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
		<a id="modal-confirm-button" href="#" class="btn btn-primary">Save changes</a>
	</div>
</div>
{/#}

modal.latte

{#content}
	<script type="text/javascript">
		$(function(){
			$('form.ajax').each(function(){
				Nette.initForm(this); // Jinak se neprovede validace
			});

			$('body').on('click', '#modal-confirm-button', function(){
				$('#frm-testComponent-form').submit(); // Submit formu po kliku na "modal tlačítko"
			});
		});
	</script>

	{control testComponent}
{/#}

FormComponent.php

use Nette\Application\UI\Control,
	Nette\Application\UI\Form;

class FormComponent extends Control{

	public function render(){
		$template = $this->createTemplate();
		$template->setFile(__DIR__.'/formComponent.latte');
		$template->render();
	}

	protected function createComponentForm(){
		$control = new Form;
		$control->getElementPrototype()->class = 'ajax';
		$control->addText('text', 'Text')
				->addRule(Form::FILLED, 'Musíte vyplnit pole Text.');
		$control->addSubmit('send', 'Send');
		return $control;
	}
}

formComponent.latte

{#content}
	{control form}
{/#}

Tohle je sice „nejfunkčnější“ verze, ale má drobné mouchy. Pokud daný formulář odešlu přes klasické odesílací tlačítko formuláře, tak se validace provede jednou a vše funguje jak má, ale pokud použiji $('#frm-testComponent-form').submit(); tak se validace provede dvakrát.

Proč se tomu tak děje???

Předem dík za nakopnutí.

Etch

Tak zatím to řeším pomocí šílenosti typu:

<script type="text/javascript">
	$(function(){
		$('#modal').on('loaded', function(){

			$.nette.load(); // Zprovozní ajax v modalu

			$('form.ajax').each(function(){
				Nette.initForm(this); // Zprovozní validaci v modalu
			});

			$('body').off('click').on('click', '#modal-confirm-button', function(){
				$('#frm-testComponent-form-send').click(); // Simuluje klik na odesílací tlačítko
			});
		});
	});
</script>

ale přijde mi to jako škrábat se levou nohou za pravým uchem.

akadlec

@Etch: Nějak mi uniká proč to takto řešíš? Normálně mám includovany nette.ajax.js a nette.forms.js a stačí když na form pověsím classu ajax Nemáš tam ještě nějaký js kód co by ti to přebíjel nebo nějaký zdvojený init?

Majkl578

Ono spíš záleží, jak ten modál funguje. Pokud se ten div jen zobrazí absolutně napozicovaný, nebude problém. Pokud se ovšem zkopíruje z prototypu a v DOMu se plácne někam jinam, validace samozřejmě fungovat nebude a je nutno form inicializovat.

Etch

@**akadlec**

Jasně tohle by nebyl problém kdyby ten obsah toho modalu byl komplet celej už při loadu stránky. Jenže ten form tam není a natahuje se přes jiné view ajaxem a to nette.ajax nejak „nepobere“. Když jsem před upgradem používal jquery.nette.js + jquery.ajaxform.js tak to fungovalo zcela normálně.

@**akadlec** & @**Majkl578**

O tu samotnou inicializaci formu ani tak moc nejde. Mě spíše zaráží, proč se při volání:

<script type="text/javascript">
            $('body').off('click').on('click', '#modal-confirm-button', function(){
                $('#frm-testComponent-form').submit();
            });
</script>

spustí dvakrát validace a při zavolání

<script type="text/javascript">
            $('body').off('click').on('click', '#modal-confirm-button', function(){
                $('#frm-testComponent-form-send').click();
            });
</script>

se pustí normálně jen jednou.

tedy proč se:

$('#frm-testComponent-form').submit();

chová jinak než

$('#frm-testComponent-form-send').click();

akadlec

@Majkl578: imho bude, resp mě funguje. Modal se mě natáhne ajaxem, vloží do domu nabindujou akce a na závěr se vykousne a zobrazí a validace a odesílání funguje normálně.

@Etch: viděl bych to na problém vícenásobného zavěšení akce na button.

Jen dotaz, proč tam ještě binduješ akce když se ti o to postará nette.ajax ?

Editoval akadlec (9. 7. 2013 19:28)

Etch

@**akadlec**

Při zavěšování akce na button používám:

$('body').off('click').on('click', '#modal-confirm-button', ...);

tedy nejdřív co je zavěšené odstraním a až pak zavěsím to co potřebuji. Nějak mě nenapadá, jak by se na to tlačítko při použití .off('click') mohlo zavěsit více věcí než jen jedna.

Ty bindy toho submitu tam jsou pouze z jednoho důvodu. K odesílání toho formuláře se nepoužívá formulářové tlačítko (to tam dokonce ani vůbec nebylo dokud jsem to nemusel obejít přes fake click), ale zcela jiný prvek (tlačítko), který má pouze nastaven aby pomocí JS submitnul daný formulář.

Všechny tlačítka a jejich akce se do modalu navíc generují pomocí JS z data atributů něco na způsob:

<a role="button" n:href="modal" class="btn fire-modal"
	data-toggle="modal"
	data-target="#modal"
	data-backdrop="static"
	data-modal-label="Název modalu"
	data-modal-cancel-button-label="Zrušit"
	data-modal-cancel-button-dismiss="modal"
	data-modal-cancel button-class="btn-warning"
	data-modal-confirm-button-label="Uložit"
	data-modal-confirm-button-class="btn-success"
	data-modal-clean-button-label="Vyčistit formulář"
	data-modal-clean-button-class="btn-danger"
	data-modal-clean-button-onclick="...">Modal</a>

ten modal prostě existuje jen jako čistá šablona bez contentu a bez ovládacích prvků a jeho „podoba“ se vygeneruje podle data atributů prvku, který ho vyvolal.

Editoval Etch (9. 7. 2013 19:55)

akadlec

A toto je jen překlep?

$('#frm-testComponent-form').submit();

$('#frm-testComponent-form-send').click();

co jsou tyto dva elementy?

Jinak imho pověsit tu akci na ten button v modalu je dle mě lepší na přímo než takto přes celou strukturu DOMu:

<script type="text/javascript">
            $('#modal-confirm-button').click(function(){
                $('#frm-testComponent-form').submit();
            });
</script>

a v tom modal.latte bych vyhodil init těch formu, nebo jak dostaneš ten form do stránky?

$('form.ajax').each(function(){
    Nette.initForm(this); // Jinak se neprovede validace
});

Za předpokladu že obsah toho formu nahraješ přes ajax a pak vložíš jako snippet tak ti to musí nette.ajax.js zahookovat.

Editoval akadlec (9. 7. 2013 20:05)

Etch

@**akadlec**

$('#frm-testComponent-form') // Tohle je formulář. Podle ID se vybere a volá se na něm submit
$('#frm-testComponent-form-send'); // Tohle je odesílací tlačítko toho formuláře.

Ty elementy tam samozřejmě v praxi takhle natvrdo definované nejsou. V tom „příkladu“ jsou je abych maximálně zjednodušil kód. V praxi je tam logika, která pozná „hlavní“ formulář modal okna a na něj se pak zavěšuje submit.

Ohledně zavěšení akce přímo na button je to dobrá připomínka. ;)

BTW: Ještě ohledně toho dvojího zavěšení události na to tlačítko. To to nemůže být už jen z toho důvodu, že kdyby se to zavěsilo dvakrát, tak by proběhl 2× i ten fake click přímo na tom tlačítku. Tedy validace by se spustila také dvakrát i s tím workaroundem.

EDIT:

a v tom modal.latte bych vyhodil init těch formu, nebo jak dostaneš ten form do stránky?

Formulář se tam dostane pomocí bootstrap remote (tedy v podstatě pomocí jQuery.load()) z akce presenteru. Tedy nějakým normálním ajax requestem na Homepage:modal.

Editoval Etch (9. 7. 2013 20:23)

akadlec

@Etch:

Formulář se tam dostane pomocí bootstrap remote (tedy v podstatě pomocí jQuery.load()) z akce
presenteru. Tedy nějakým normálním ajax requestem na Homepage:modal.

a nechceš to zkusit načíst pomocí nette.ajax? Ta dvojí validace se ti tam podle mě nasadí proto protože tam máš jednak nette.init tak i init toho validatoru. Ale takto těžko asi střílet od boku.

enumag

Etch napsal(a):

<a role="button" n:href="modal" class="btn fire-modal"
	data-toggle="modal"
	data-target="#modal"
	data-backdrop="static"
	data-modal-label="Název modalu"
	data-modal-cancel-button-label="Zrušit"
	data-modal-cancel-button-dismiss="modal"
	data-modal-cancel button-class="btn-warning"
	data-modal-confirm-button-label="Uložit"
	data-modal-confirm-button-class="btn-success"
	data-modal-clean-button-label="Vyčistit formulář"
	data-modal-clean-button-class="btn-danger"
	data-modal-clean-button-onclick="...">Modal</a>

Nebylo by lepší použít jeden atribut data-modal kam by se pomocí makra generoval JSON?

Etch

@**enumag**

Pravděpodobně, ale popravdě úplně přesně nechápu jak by takové makro mělo vypadat…

Každopádně způsob zápisu je to poslední, co mě teď „trápí“, ale každopádně je to věc k zamyšlení, protože mě osobně přijde ten způsob, kterým to je implementované teď také poněkud nehezký a hlavně děsně ukecaný. :D

EDIT: Ten současný způsob má asi jen jednu výhodu a tou je, že ho dokáže celkem dobře napovídat IDE.

Editoval Etch (9. 7. 2013 21:08)

Vojtěch Dobeš

Mohl bys poslat kompletní Javascript? V tom tuctu příspěvků se realita ztrácí jako za mlžným závojem. Btw pokud existuje způsob, jak se dostat k objektu toho requestu, který modální okno načítá, lze na tento request dodatečně navázat zpracování skrze nette.ajax.js (i když doplňkem vyvolán nebyl) pomocí metody $.nette.handleXHR() – zatím pouze v masteru.

Etch

@**vojtech.dobes**

Udělám nějakou ukázku na sandboxu a pošlu to někam na git. ;)

sandbox

Editoval Etch (10. 7. 2013 0:27)

Jan Mikeš

Nekde tu drive byla extension na history, se zmenou adresy po ajax requestu. Nemate nekdo nejaky osvedceny zpusob/hotovou extension?

akadlec

@Lexi: Pokud se nemýlím tak history ext je přímo v nette ajax zahrnuta.

MW

Zdravím,

prosím o radu. V rámci čistky a zpřehlednění si upravuji aplikaci a sjednocuji JSka. Pro autocomplete u comboboxu načítám tento combobox.js

Rád bych obsah přemístil do centrálního souboru k ostatním JS funkcím, ale nevím jak toto upravit jako extension:

$.nette.ext('combobox', {
    load: function () {
	...
    }
});

Moc díky !

Editoval MW (12. 7. 2013 8:51)

Jan Mikeš

akadlec napsal(a):

@Lexi: Pokud se nemýlím tak history ext je přímo v nette ajax zahrnuta.

Kde konkretne? Divam se na zdroj nette.ajax.js na githubu i na extensions a nevidim to tam :(

jiri.pudil

@Lexi: Je to překvapivě ve složce history

Jan Mikeš

@jiri.pudil: proboha… diky!! jsem asi blbec, ale vazne jsem se do slozky history ani nepodival a hledal jsem to v extensions a primo ve zdrojaku samotneho doplnku. Nevim proc, ale slozku history jsem povazoval za nejake stare scripty, ktere me zajimat nemusi :)

na1k

Ahoj, snažím se na webu kde používám nette.ajax.js zprovoznit postarší doplněk DependentSelectBox , který ovšem využívá starší formulářový AJAX, kde tlačítka mají metodu ajaxSubmit

Jak můžu tuto metodu nasimulovat pomocí nette.ajax.js?
Pokud tomu dobře rozumím, tak by mi mělo stačit manuální odeslání formuláře, po kterém se provede daný callback.

Edit: Pokud by někomu pomohlo, vyřešil jsem to následovně:

var form  = $('#' + (e.currentTarget.activeElement.id) + $.dependentselectbox.buttonSuffix).closest('form');

$.nette.ajax({
	type: 'POST',
	url: form.attr('action'),
	data: form.serialize() + '&' + $(button).attr('name') + '=' + $(button).val()
}, this, e).done($.dependentselectbox.jsonResponse);

Editoval na1k (17. 7. 2013 17:31)

Vojtěch Dobeš

Přesně tak :).

duskohu

Caute, neviete mi poradit ked mam rozsirenie napr. opakovane volanie nejakeho handle v intervale, a pouzivam spinner rozsirenie, tak nechcem aby mi u tohto rozsirenia tento spinner naskakoval, da sa to nejako vypnut, len pre toto rozsirenie?

(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({
                    off: ['unique'],
                    url: obj.handle
                });
            }, 4000);
        }
    });
})(jQuery);

SankaCoffee

Zdravím,
pokouším se nahradit klasický confirm modalem z twitter bootstrap. Na scriptu z tutoriálu se mi to podařilo rozchodit. Extension pro confirm jsem také rozchodil, ale nejsem schopný to už upravit pro použití s modalem. Neporadil by někdo, co s tím?

Moje řešení pomocí scriptu z tutoriálu.

<script>
$(function(){
	var ajaxRequest = null;

	$.ajaxSetup({
		cache: false,
		success: function(payload) {
			if (payload.snippets) {
				for (var i in payload.snippets) {
					$('#' + i).html(payload.snippets[i]);
				}
			}
		}
	});

	// odesilani odkazu AJAXem
	$('a.ajax').live('click', function(event) {
		event.preventDefault();
		if (this.getAttribute('data-confirm') !== undefined) {
			modalConfirm(this.getAttribute('data-confirm'));
			ajaxRequest = this.href;
			return false;
		}
		$.get(this.href);
	});

	// odesilani formularu AJAXem
	$('form.ajax').live('submit', function(event) {
		event.preventDefault();
		$.post(this.action, $(this).serialize());
	});

	function modalConfirm(question)
	{
		$('#modalConfirm').modal({show:true, backdrop:'static', keyboard: false});
		$('#modalConfirmQuestion').html(question);
	}

	$('#modalConfirmYes').click(function(){
		$('#modalConfirm').modal('hide');
		$.get(ajaxRequest);
		ajaxRequest = null;
	});

	$('#modalConfirmNo').click(function(){
		$('#modalConfirm').modal('hide');
	});

});
</script>

JuniorJR

Ahoj,

Nesetkal se nekdo s problemem, ze pri pouziti tohoto doplnku a aplikaci snippetu, jQuery nevidi nove vytvoreny DOM strom? Stale jakoby vidi puvodni, pred aktualizaci.

Zkousim ajaxovy replikator a nefunguje mi proto znovu-nabindovani potrebnych pluginu na textova pole.

jQuery 1.7.1 a nette.ajax.js 1.2.2

wizzard

Zdravim,

neví někdo jak vypnout v tomhle rozšíření cache?

Díky

akadlec

@duskohu: pomocí toho off v tom ajaxu to nejde?

load: function () {
    var obj = $('[data-order-notification]').data('orderNotification');
    setTimeout(function () {
        $.nette.ajax({
            off: ['unique', 'spinner'],
            url: obj.handle
        });
    }, 4000);
}

akadlec

@JuniorJR: Zřejmě se snažís novým DOMeme pracovat dříve než se z něj ten nový stane, jinak není možné aby si k těm elementům neměl přístup pokud už jsou vloženy.

duskohu

@akadlec uz ide, len v dokumentaci som si to nejako nevsimol, dakujem za odpoved :-)

JuniorJR

akadlec napsal(a):

@JuniorJR: Zřejmě se snažís novým DOMeme pracovat dříve než se z něj ten nový stane, jinak není možné aby si k těm elementům neměl přístup pokud už jsou vloženy.

No, ja prave pouzil stejny pristup, jako je pouzit v demo prikladu pro addDynamic, ale jeste se na to zkusim znova podivat, kazdopadne je to divne. Drive jsem s tim problemy nemel.

Casper

Zdravím, narazil jsem na nefungující toggle spolu s použitím nette.ajax.js s rozšířením history.ajax.js a obalením togglujících prvků snippetem. Chyba se ještě ke všemu vyskytuje pouze v Chrome. Použití:

Formulář:

$form->addCheckbox('test', "Toggle")
        ->addCondition(Form::FILLED)
            ->toggle("toggleId");

Vykreslení:

{form myForm}
    {snippet mySnippet}
      {input test}
    {/snippet}

    <div id="toggleId">
        toggled content
    </div>
{/form}

K použití snippetů uvnitř formu je samozřejmě v presenteru:

$this->template->_form = $this["myForm"];

Přičemž pokud zakomentuji přilinkované rozšíření history.ajax.js, pak vše funguje jak má. Setkal jste se někdo s podobným problém?

Použil jsem poslední verze všech knihoven (netteForms.js, nette.ajax.js, history.ajax.js) z githubu. Všechny ostatní prohlížeče nedělají problémy. Console v Chrome nic nehlásí.

Editoval Casper (21. 8. 2013 14:06)

MW

Zdravím,

prosel vyzkousel jsem uz par zmatenych reseni na modal okna, ale vždy zakonceno nejakym dohadem a resenim validace, zaviranim.. proste nefunkcnosti.

Před casem jsem presel na tento doplnek a tak bych se rad zeptal, jestli někdo nemá vzor nejakeho funkčního reseni.

Jde me o grid (ten mam uz taky Vojtuv ), ale predevsim o otevreni modalu s formulářem, funkcni validaci, odeslanim a naslednym zavreni modálního okna.

Nemate někdo prosim nejaky cisty vzor?

Moc dekuji

Šaman

Také se přimlouvám za nějaký quickstart na modální okno s formulářem. Nám nejavascriptérům by to hodně pomohlo. Díky.

Editoval Šaman (21. 8. 2013 16:50)

Siam

vojtech.dobes napsal(a):

@motorcb This way :)

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

Dobrý den,
chtěl bych se zeptat. Tento kód mi funguje dobře, ale pouze když se vykoná poprvé. Podruhé se již nevykoná ajax vůbec a teda ani ten efekt. Jak to udělat aby šel volat opakovaně? Děkuji za odpověď. nette.ajax mám aktuální z masteru.

Vojtěch Dobeš

I see, mám tam bug. Opravím.

Siam

Díky Vojto.

Narazil jsem bohužel i v IE10 na problém s odpovědí 304 zmiňovaný zde. U mě se to ale projevuje jinak. Načtu stránku A a po kliknutí na přechod na jinou stránku ajax funguje. Jakmile se ale z kterékoliv jiné stránky chci vrátit na stránku A server vrátí 304 a snippet se nepřekreslí. (to co tam popisuje Lexi mi ale funguje)

Nešlo by to nějak ošetřit přímo v nette.ajax?

pepakriz

Měl bych několik dotazů k rozšíření history. Začal jsem si s ním hrát a narazil jsem na několik problémů, které mohou plynout z mé neznalosti.

Proč historie vypíná rozšíření redirect? Vím, že rozšíření posílá argument redirect pokaždé, ikdyž k přesměrování nedošlo (viz. https://github.com/…eHandler.php#L80). Ale proč je to tak udělané? Proč tento argument nenazvat třeba historyRedirect a původní význam redirect zachovat – tedy nevypínat rozšíření redirect.
Po aktivaci historie mě přestala fungovat většina vlastních rozšíření. Jejich podoba byla přibližně následující:

	$.nette.ext('tooltipBind', {
		init: function () {
			this.init($('body'));
		},
		success: function (payload) {
			if (!payload.snippets) {
				return;
			}

			var _this = this;
			for (var i in payload.snippets) {
				$('#' + i).each(function () {
					_this.init($(this));
				});
			}
		}
	}, {
		init: function (target) {
			target.find(this.selector).each(function () {
				$(this).tooltip();
			});
		},
		selector: "[data-toggle='tooltip']"
	});

Pro vysvětlení. Při inicializaci se aktivoval nějaký jQuery plugin na celé body a poté při každém requestu se totéž provádělo na nové snippety. Bohužel v kombinaci s historií se aktivace pomocí init neprovede, tedy vlastně provede, ale ihned poté dojde k deaktivaci díky této části – https://github.com/…tory.ajax.js#L32 . Na první pohled se tedy nabízí změnit event init na load, což ale zase způsobí, že se bude jQuery plugin navěšovat vždy na celé body při každém requestu. Jak tedy na to správně?

pepakriz

Casper: Myslím, že chyba souvisí s bodem dva, o kterém jsem psal výše.