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

Phalanx
Člen | 310
+
0
-

Ahoj, mám přesně opačný problém než @petr.kubin

Dělá se mi auto focus na překreslený snippet vždy. Při tom jsem nenašel v knihovně nette.ajax.js focus(). Jen v NetteForms.js, ale ten tam byl při Error. Potřebuju ten autofocus vypnout. Po načtení stránky se mi dá focus ve formuláři dolů na prvek, který byl přenačten ajaxově.

Zkoušel jsem přidat .done s e.preventDefault, ale bez úspěchu.

Jinak kód funguje správně – data se přenačítají jak při startu tak i při onChange elementu.

<script>
		$('select[name=muj_select]').change(function (e) {
			$.nette.ajax({
				url: {link invalidateSubtype!},
				data: {
					'value': $('select[name=muj_select]').val()
				}
			}, this, e).done(function (payload, e) {
				e.preventDefault();
				return false;
			});
		});

		$('select[name=muj_select]').trigger("change");
</script>

Děkuji za případnou pomoc


vyřešil jsem přes standartní jQuery $.post

Editoval Phalanx (29. 9. 2016 16:53)

pitr82
Člen | 121
+
0
-

Vojtěch Dobeš napsal(a):

Lexi

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

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

Zdravím, pokouším se překreslovat snippet v intervalech. Našel jsem výše zmíněný postup.
Problém je, že k požadavky postupně narůstají n-krát.
po 5sek. jeden, po 10.sek 2, po 15.sek 4, po 20.sek 8 atd… Nevíte, co toto může spůsobovat?

enumag
Člen | 2118
+
0
-
(function () {
  function poll() {
      $.nette.ajax({
          url: ...
      });
  };
  setInterval(poll, 5000);
  poll(); // pokud chceš první volání hned a ne až za 5 vteřin
})();

Editoval enumag (5. 10. 2016 21:17)

pitr82
Člen | 121
+
0
-

@enumag
V tom nemám problém, mám problém, že s každým dalším voláním se mi duplikují XHR requesty. handler se mi volá 2× více s každým opakováním… a to mi zabije celou aplikaci.

CZechBoY
Člen | 3608
+
0
-

Nevolas znova inicializacni js?

pitr82
Člen | 121
+
0
-

@enumag @CZechBoY
už to funguje, musel jsem promazat cache… a už se odesílá po jednom … :-)

jiri.pudil
Nette Blogger | 1028
+
0
-

Musíš dávat bacha, kde voláš setInterval, ono je to totiž něco jiného než setTimeout :)

mfajfr
Člen | 26
+
0
-

Ahoj,
vytvořil jsem vlastní extension na tři formuláře – tři kroky. V případě správného vyplnění formuláře (validace přes ajax-live-validation knihonu) se pošlou ajaxem data – zpracují se a v případě úspěchu se odscrolluje k dalšímu kroku. Problém je v tom, že se daná extenstion asi nabinduje na oba formuláře, čili scrolluje k dvojce a pak hned k trojce.

<script>
// První krok
$.nette.ext('address-submit', {
            load: function (reqHandler) {
                $(document).on('click', '.js-address-submit', function (e) {
                    e.preventDefault();
                    reqHandler(e);
                });
            },
            success: function (payload, status, jqXHR, settings) {
                $('html, body').animate({
                    scrollTop: $('.js-order-2').position().top
                }, 2000);
            }
        });

// Druhý krok
        $.nette.ext('payment-submit', {
            load: function (reqHandler) {
                $(document).on('click', '.js-payment-submit', function (e) {
                    e.preventDefault();
                    reqHandler(e);
                });
            },
            success: function (payload, status, jqXHR, settings) {
                $('html, body').animate({
                    scrollTop: $('.js-order-3').position().top
                }, 2000);
            }
        });
</script>

Co se týče oznčení formuláře třídou ajax, tak jsem zkoušel tlačítko, pak formuláře, pak oboje .. Ovšem to asi k tomu nemá závislost.

Předem díky.

Editoval mfajfr (11. 10. 2016 8:59)

Jan Mikeš
Člen | 771
+
+3
-

@mfajfr osobně bych na to šel jinak, postup který popisuješ se mi nelíbí a vlastně ani nemůže správně fungovat. Extensions jsou společné, pro všechny ajaxové požadavky, napiš si tedy nějakou „scrollTo“ extension, která bude kontrolovat element (odkaz v případě kliknutí, formulář/submit button v případě formulářů), na přítomnost třeba data-scroll-to atributu, který bude obsahovat hodnotu kam scrollovat, např #myForm-frm, pokud se u něj atribut najde a element bude existovat, scrollni na něj. Toto je mnohem čistější a znovupoužitelné řešení.

Kcko
Člen | 465
+
0
-

Pokud bych si chtěl napsat vlastní extension, která bude používat veškeré dostupné eventy (tj. od init až po complete), jak ošetřím, aby se volala jen pro určité akce? (Třeba po kliku na odkaz s třídou „hokus“).

Kdyby všechny eventy měly alespoň jeden předávaný argument stejný, ze kterého bych jakkoliv dokázal přečíst informaci o elementu, ze kterého ajax požadavek pochází, tak bych to nějak vyzkoumal, ale takto nevím.

Díky.

t-raven
Člen | 5
+
0
-

ahoj, mam problem se „zamerenim“ elementu, ktery request spusti… teoreticky by mel byt v settings.nette.el .. ? jenze

<script>
	$.nette.ext('whatever', {
		before: function(jqXHR, settings){
			console.log(settings.nette);
		}
	});
	$.nette.init();
</script>

vypise po kliknuti na tlacitko undefined … poradili byste mi prosim nekdo kde je zakopan pes?

batko
Člen | 219
+
+2
-

Ahoj,

potřeboval bych po odeslání formuláře někde zachytit jeho success a zavolat callback.

Jde to nějak elegantně?

Děkuji

Phalanx
Člen | 310
+
0
-

@batko Našel jsem na stackoverflow:
http://stackoverflow.com/…-form-submit

<script>
$("#myform").bind('ajax:complete', function() {
	// tasks to do
});
</script>

Ale taky by mě zajímalo jak se tohle řeší v nette ajax.

CZechBoY
Člen | 3608
+
0
-

Normálně v success u volání toho ajaxu.
Já teda většinou ve formuláři v onSuccess zavolám redrawControl a v javascriptu nemusím nic řešit.

O co přesně se snažíte?

Phalanx
Člen | 310
+
0
-

@CZechBoY Příkladem může být třeba formulář školních tříd, kde máš jQuery autocomplete s položkami např. uklízečky. Vedle toho máš tlačítko na modal, vytvořit novou uklízečku. Po vyplnění nové uklízečky v modálním okně chceš přímo doplnit novou uklízečku do inputu autocomplete.

manwe
Člen | 44
+
+2
-

Zdravim,

resil jsem moznost sledovat prubeh nahravani pri odeslani souboru pres ajax.
Po par hodinach reseni jsem prisel na tohle, pokud by to chtel nekdo vylepsit a dat primo do tohoto pluginu tak budu jen rad, myslim ze se to muze dost hodit (pro nejaky progress bar pri nahravani souboru).

Zrejme by bylo treba pridat jeste event „progress“ krome „before“, „init“ a dalsich at je schopne podporovat extensions, ale zatim to tu hazim takhle, snad se to nekomu bude hodit :)

<script>
$.nette.ext('myprogress', {
        before : function(xhr, settings){
            var myext = this;
            settings.xhr = function() {
                var xhrobj = jQuery.ajaxSettings.xhr();
                if (xhrobj.upload) {
                    xhrobj.upload.addEventListener("progress", function(event)
                    {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }

                        myext.onprogress(percent);

                    }, false);
                }

                return xhrobj;
            }
        }

    },{
        onprogress: function(percent){
            console.log('State of upload: '+percent);
        }
    });
</script>

Editoval raddy668 (2. 3. 2017 14:58)

sepo
Člen | 69
+
0
-

Ahoj

<script src="{$basePath}/js/extensions/confirm.ajax.js"></script>
<script src="{$basePath}/js/extensions/spinner.ajax.js"></script>

linka

<a href="del!" data-confirm="Naozaj vymazať ?" class="ajax">del</a>

funguje OK ale ako náhle prehodím poradie načítania extension, confirm.ajax.js pod spinner.ajax.js

<script src="{$basePath}/js/extensions/spinner.ajax.js"></script>
<script src="{$basePath}/js/extensions/confirm.ajax.js"></script>

tak sa pri confirm cancel sputí na stránke spinner a točí a točí
prečo je dôležité poradie ?

theo
Člen | 57
+
0
-

Ahoj,

stalo se mi, že při načítání knihovny nette.ajax.js jsem i při správném řazení načítání jednotlivých knihoven (nejdříve jQuery, pak nejprve nette.ajax.js) a jejich úplném načtení dostával od Firefoxu chybu TypeError: $.nette. is undefined z bloku inicializace této knihovny ($.nette.init();). Řešením se nakonec ukázalo to, že jsem ve stránce omylem dvakrát načítal jQuery (v obou případech před inicializací nette.ajax.js). Píšu to sem doufaje při tom, že to někomu pomůže, mě to dalo docela dost práce to najít.

Editoval theo (18. 7. 2017 15:41)

d@rkWolf
Člen | 162
+
0
-

Zdravím, dá se nějak nadefinovat výchozí ajaxifikace odkazů? Zkoušel sem celkově ajaxifikovat administrační rozhraní, přihodil jsem tam rozšíření history a nějak jsem tady z této věty „Write your application as normal. All redirects and forwards will be properly handled.“ vydedukoval, že to bude ajaxově zpracovávat odkazy automaticky, což se teda neděje. Tak mě napadlo, jestli tam není nějaké nastavení, které jsem nenašel a které by obrátilo chování, aby místo aktivace na třídě ajax se aktivovalo na všechny odkazy a nějakou třídou se jen vypínalo tam kde to nechci?

Dan Hundrt
Člen | 74
+
+1
-

d@rkWolf napsal(a):

Zdravím, dá se nějak nadefinovat výchozí ajaxifikace odkazů? Zkoušel sem celkově ajaxifikovat administrační rozhraní, přihodil jsem tam rozšíření history a nějak jsem tady z této věty „Write your application as normal. All redirects and forwards will be properly handled.“ vydedukoval, že to bude ajaxově zpracovávat odkazy automaticky, což se teda neděje. Tak mě napadlo, jestli tam není nějaké nastavení, které jsem nenašel a které by obrátilo chování, aby místo aktivace na třídě ajax se aktivovalo na všechny odkazy a nějakou třídou se jen vypínalo tam kde to nechci?

Tohle bych nedelal, radeji bych pouzit ajax je tam, kde to potrebuji. Pokud to opravdu chcespouzit, tak nejak takto, psano z hlavy:

$(document).on('click', 'a:not(.ajax-ignore), input[type=submit]:not(.ajax-ignore)', function (e) {
    e.preventDefault();
    $.get(this.href);
});

S tim ze trida ajax-ignore nebude posilan jako ajax.

rumcais1
Člen | 80
+
0
-

Ahoj mám tento kód, který spouštím pi načítání dashboardu. Chci aby by asynchroně načítal hodnoty. Ale nette.ajax my stejně pořád jede synchroně. Spustí se najednou, ale stejně na sebe čekají. Díky

<script>
$('.ajax-onload').on( "osa:snipetter", function() {
    var url=$(this).data("url");
    var obj=this;
  $.nette.ajax({
    url: url,
    off: ['unique'],
    start: function(){
      $(obj).html('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>');
    }
  });
});
$('.ajax-onload').trigger( "osa:snipetter" );
</script>

Editoval rumcais1 (5. 2. 2018 23:03)

Phalanx
Člen | 310
+
0
-

@rumcais1 Podle mě to musíš řešit ty a ne nette ajax. Např. dělat request např. každých 10 sekund – https://stackoverflow.com/…y-10-seconds

rumcais1
Člen | 80
+
0
-

To jsi mně nepochopil. Já mám problém, že spustím v jeden okamžik třeba 5 nette.ajax, a každý zpozdím v handleru o dejme tomu 10 sekund. Tak výsledek nemám 10 sekund. Ale 50 sekund. V jeden okamžik se všechny odešlou. Ale pak se plní postupně. Dá se nějak donutit nette ajax, aby jelo asynchroně. Nebo to musím přepsat do obyč ajax. Díky

CZechBoY
Člen | 3608
+
0
-

A nečekaj na sebe jen odpovědi serveru? Mohly by to dělat sessions.

rumcais1
Člen | 80
+
0
-

To netuším teď jsem zkusil do latte jsem dal

<script>
	$.nette.ajax({
		off: ['unique'],
		url: {link test!}
	});
	$.nette.ajax({
		off: ['unique'],
		url: {link test1!}
	});
	$.nette.ajax({
		off: ['unique'],
		url: {link test2!}
	});
</script>

a do presenteru jsem dal

<?php
	public function handleTest() {
        sleep(5);

    }
    public function handleTest1() {
        sleep(5);

    }
    public function handleTest2() {
        sleep(5);

    }
?>

a v chromu mám

?do=test 10,37s
?do=test1 15,47s
?do=test2 5,16

rumcais1
Člen | 80
+
0
-

Jo máš pravdu dělala to session. http://konrness.com/…hp-requests/ Pomohlo session_write_close(); . O tomhle jsem vůbec nevěděl. Díky

2bfree
Člen | 248
+
0
-

Řešil jsem otázku, jak navěsit na konkrétní odkaz událost při done.

Řešení je celkem jednoduché:

<a href="..." class="ajax specific">Something</a>
var $anchor = $('a.specific').first();
$anchor.on('click', function (event) {
	$.nette.ajax({}, this, event).done(function () {
		alert('done');
	});
});
$anchor.trigger('click');

Narazil jsem ale na to že pokud má odkaz i class ajax (a tedy se i standardně zajaxje), tak se provede odeslání tohoto odkazu dvakrát.

Zkoušel jsem na ten event navěsit preventDefault(), stopPropagation() a ne a ne dosáhnout toho, aby se na to standardní zajaxování vykašlal :) Jak toho dosáhnout kromě varianty odebrání class="ajax" nebo ohýbání globální zajaxovátka, ať vynechá odkazy s class="specific"? Pokud to tedy nějak jde?

2bfree
Člen | 248
+
0
-

2bfree napsal(a):

Řešil jsem otázku, jak navěsit na konkrétní odkaz událost při done.

Řešení je celkem jednoduché:

<a href="..." class="ajax specific">Something</a>
var $anchor = $('a.specific').first();
$anchor.on('click', function (event) {
	$.nette.ajax({}, this, event).done(function () {
		alert('done');
	});
});
$anchor.trigger('click');

Narazil jsem ale na to že pokud má odkaz i class ajax (a tedy se i standardně zajaxje), tak se provede odeslání tohoto odkazu dvakrát.

Zkoušel jsem na ten event navěsit preventDefault(), stopPropagation() a ne a ne dosáhnout toho, aby se na to standardní zajaxování vykašlal :) Jak toho dosáhnout kromě varianty odebrání class="ajax" nebo ohýbání globální zajaxovátka, ať vynechá odkazy s class="specific"? Pokud to tedy nějak jde?

Tak evidentně by to mělo být takto:

var $anchor = $('a.specific').first();
$anchor.unbind('click.nette');
$anchor.on('click.nette', function (event) {
	$.nette.ajax({}, this, event).done(function () {
		alert('done');
	});
});
$anchor.trigger('click.nette');
d@rkWolf
Člen | 162
+
0
-

Zdravím, mám problém s kombinací nette.ajax + history a Ublaboo Datagrid, nejsem si jistej, kam přesně ten dotaz patří – dával jsem ho sem:https://forum.nette.org/…any-datagrid?p=26 , jde o to, že doporučené řešení použití Nette.ajax + history rozšíření z dokumentace provádí při provedení ajax volání automatický redrawControl(„content“), což je normálně fajn aby se změnila stránka ajaxově, ovšem až to té chvíle, kdy je na stránce Datagrid, který vytváří vlastní ajaxová volání, kterýma se překresluje třeba při filtrování, jenže to odchytí ten redrawControl(„content“) v beforeRender() basePresenteru a překreslí se mi místo pouze Datagridu celý content, načež ztratím focus např. toho filtrovacího pole v datagridu. Poradil by mi někdo, jak ty volání rozlišit, aby se dalo rozpoznat, zda se má udělat ten redrawControl(„content“), nebo ne?

Nedaří se mi na nic přijít, nevím, jak z toho ven, v rámci odlehčení načítání složitého back-endu jsem se jal celý back-end zajaxovat a pak, když sem to konečně dodělal jsem zjistil tenhle problém. :-(

Editoval d@rkWolf (7. 3. 2018 20:20)

Yaromil
Backer | 20
+
+1
-

Ahoj,

neřešil jste někdo problém s tím, že pokud pomocí JS / Ajaxu překreslím snippet, nefungují následně v daném snippetu ajax odkazy? Problém je jen s jQuery 3, pod jQuery 2 vše funguje tak, jak má. Našel jsem obdobné issue (https://github.com/…s/issues/117), ale popsané řešení mi nepomohlo.

Díky za radu.

Alsatian
Člen | 163
+
0
-

Děkuji a pokud chce někdo šablonku pro Bootstrap 4 a nebo s šipkami (namísto Prev a Next)FontAwesome tak přikládám.

Obsah šablonky pro vykreslení šipek s Bootstrap 4

{if $paginator->pageCount > 1}
<nav aria-label="Page navigation example">
	<ul class="pagination">
		{if $paginator->isFirst()}
		<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">« Previous</a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $paginator->page - 1}" rel="prev" n:class="page-link, $useAjax ? ajax">« Previous</a></li>
		{/if}

		{foreach $steps as $step}
		{if $step == $paginator->page}
		<li class="page-item active"><a class="page-link" href="#" tabindex="-1">{$step}</a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $step}" n:class="page-link, $useAjax ? ajax">{$step}</a></li>
		{/if}
		{if $iterator->nextValue > $step + 1}<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">…</a></li>{/if}
		{/foreach}

		{if $paginator->isLast()}
		<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Next »</a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $paginator->page + 1}" rel="next" n:class="page-link, $useAjax ? ajax">Next »</a></li>
		{/if}
	</ul>
</nav>
{/if}

Pro Bootstrap 4 a šipky FontAwesome

{if $paginator->pageCount > 1}
<nav aria-label="Page navigation example">
	<ul class="pagination">
		{if $paginator->isFirst()}
		<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $paginator->page - 1}" rel="prev" n:class="page-link, $useAjax ? ajax"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a></li>
		{/if}

		{foreach $steps as $step}
		{if $step == $paginator->page}
		<li class="page-item active"><a class="page-link" href="#" tabindex="-1">{$step}</a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $step}" n:class="page-link, $useAjax ? ajax">{$step}</a></li>
		{/if}
		{if $iterator->nextValue > $step + 1}<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">…</a></li>{/if}
		{/foreach}

		{if $paginator->isLast()}
		<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
		{else}
		<li class="page-item"><a href="{link $handle, 'page' => $paginator->page + 1}" rel="next" n:class="page-link, $useAjax ? ajax"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
		{/if}
	</ul>
</nav>
{/if}

Editoval Alsatian (3. 5. 2018 14:25)

lucker14
Člen | 1
+
0
-

Ahoj, chtěl bych vědět, jestli je někde uvedený example s více různými cally na jedné stránce s různým zpracováním response. Jde o to, že jednak při načtení loaduji data pro vykreslení a na té samé stránce při onboardingu dokončuji profil uživatele přes .ajax formuláře.

Hlavní problém je, že kazdý <script>$.nette.ajax... </script>, který odešlu při submitu formulářů, se při splnění requestu zpracovává jen přes první definovaný <script>$.nette.ext('onComplete', {complete: function(... </script>, určený jen pro načtení prvotních dat.

Zkoušel jsem na formuláře přidat data-ajax-off="nazev_handleru_pro_prvotni_data", ale potom už se nestane vůbec nic.

Mohl by mi někdo poradit, nebo mě nasměrovat? Mám poskytnout více informací?

Předem děkuji :)

CZechBoY
Člen | 3608
+
0
-

@lucker14 Měly by se spustit všechny handlery. V každým handleru by sis měl zjistit jestli chceš na ten request/response reagovat nebo ne.

Felix
Nette Core | 1183
+
0
-

Cas od casu se resi, jak navesit nejaky svuj callback na odesilani formu, ikdyz ma ajax tridu.

$(".myform").on("submit.app", (e) => {
    // work here..
    alert('submit by enter');
});

$(".myform").on("click.app", ":submit", (e) => {
    e.preventDefault(); // stopnuti odesilani

    // work here..
    alert('submit by button');
});
  1. submit.app je v jQuery tzv. event.namespace, doporucuji precist o co jde (http://api.jquery.com/on/, https://api.jquery.com/…t.namespace/). Pouziva se hlavne pro oddeleni navesovanych eventu.
  2. Je potreba navesit na submit formulare a take na submit button (na to pozor!).
Kcko
Člen | 465
+
0
-

@Felix Tahle ES6 syntaxe je podporávana i v nějakém starším IE jo? (10/11)

Lepší by byl PR do dokumentace, tady v tomhle to najde 1 člověk z 10.

Celkově je dokumentace nic moc. @VojtěchDobeš kdbych neprozkoumával kód (což prostě mnohdy dělat nechci, když je kvalitní dokumentace), tak bych ani nevěděl, že mohu do vlastní extenze jako druhý parametr vložit vlastní metody a proměnné.

Editoval Kcko (25. 10. 2018 13:54)

tom
Člen | 171
+
0
-

Ahoj, podařilo se ti to vyřešit? Mám teď úplně stejný problém. Díky

Yaromil napsal(a):

Ahoj,

neřešil jste někdo problém s tím, že pokud pomocí JS / Ajaxu překreslím snippet, nefungují následně v daném snippetu ajax odkazy? Problém je jen s jQuery 3, pod jQuery 2 vše funguje tak, jak má. Našel jsem obdobné issue (https://github.com/…s/issues/117), ale popsané řešení mi nepomohlo.

Díky za radu.

lukasnov
Člen | 10
+
0
-

Ahoj, přenastavoval někdo ty základní rozšíření? Když volám var context = $.nette.ext('forms'); jak pak ten context upravit? Potřeboval bych tam přidat jednu svoji funkci a nechápu jak to tam dostat. Neřešil to někdo? Poslal by prosím někdo ukázku jak na to? Nikde jsem pořádně nenašel

CZechBoY
Člen | 3608
+
0
-

Co potrebujes pridat?

lukasnov
Člen | 10
+
0
-

Dělám kontrolu před opuštěním stránky, jestli jsou všechny změny uložené. Dělám to přes $(form).serialize() který uložim do data formu a před opuštěním stránky zkontroluju ty data-seraliaze s nově serialiaze datama jestli jsou stejná. Tak když uložím ajaxově, tak bych potřeboval updatovat data-seraliaze. Takže tý form ext bych potřeboval přidat něco jako $(this).data('serialize', $(this).serialize()); kde this je ten form. Nějaký nápad? :)

jannemec
Člen | 78
+
0
-

netteform.js inicializace v dialogu
Zdravím, mám formulář, který se nahraje do dialogového okna ajaxem – vše funguje kromě validace prvků a hlavně dynamického skrývání – podle pole bych potřeboval skrýt jedno pole … a zatímco normálně to zafunguje, v dialogu ne … předpokládám,že je potřeba inicializovat netteform, jen netuším jak

<?php
$form->addSelect('task_type', 'Type', ['simpleTask' => 'Simple Task', 'mit' => 'MIT'])->setRequired(true);
$form['task_type']->addCondition(\Nette\Application\UI\Form::EQUAL, 'simpleTask')
                ->toggle('frm-simpleTasks-newSimpleTask-description');
        $form->addTextArea('description', 'Description', 30, 4)->setHtmlId('frm-simpleTasks-newSimpleTask-description');;
?>
jannemec
Člen | 78
+
0
-

jannemec napsal(a):

netteform.js inicializace v dialogu
Zdravím, mám formulář, který se nahraje do dialogového okna ajaxem – vše funguje kromě validace prvků a hlavně dynamického skrývání – podle pole bych potřeboval skrýt jedno pole … a zatímco normálně to zafunguje, v dialogu ne … předpokládám,že je potřeba inicializovat netteform, jen netuším jak

<?php
$form->addSelect('task_type', 'Type', ['simpleTask' => 'Simple Task', 'mit' => 'MIT'])->setRequired(true);
$form['task_type']->addCondition(\Nette\Application\UI\Form::EQUAL, 'simpleTask')
                ->toggle('frm-simpleTasks-newSimpleTask-description');
        $form->addTextArea('description', 'Description', 30, 4)->setHtmlId('frm-simpleTasks-newSimpleTask-description');;
?>

Aaaa tak si odpovím sám – je třeba inicializovat netteForms pro daný formulář, zafungovalo na konci formuláře, který se přes ajax natáhne do dialogového okna …

<script>
$(function () {
    $.nette.load();
    var form = document.forms.namedItem('frm-repeatTasks-newRepeatTask'); // id formuláře ...
    if (form) {
        Nette.initForm(form);
    }
});
</script>
CZechBoY
Člen | 3608
+
0
-

@jannemec Nestacilo by jen to $.nette.load();?

Editoval CZechBoY (31. 12. 2019 8:38)

jannemec
Člen | 78
+
0
-

CZechBoY napsal(a):

@jannemec Nestacilo by jen to $.nette.load();?

Taky mě to překvapilo, ale nestačilo … to jsem tam dlouho měl a většina věcí fungovala, ale ten toggle ne.

flamengo
Člen | 131
+
0
-

Ahoj, mám dotaz na ajaxizaci, při které použiji při jednom požadavku data-ajax-append a při dalším nikoliv. Vysvětlím, co mám na mysli. Jedná se o výpis produktů vs. stránkování vs. filtr produktů.

{snippet filter}
	{control productsFilters}
{/snippet}

<div n:if="$countProducts" n:snippet="catalogue" data-ajax-append="true">
	{control catalogue}
</div>

{snippet paginator}
		{control paginator}
{/snippet}

V paginátoru mám klasické stránkování s výčtem stránek 1 – 2 – 3 .. 5 – to je řešeno jednoduše – prostý url odkaz na další stránku.
V paginátoru je také tlačítko Další produkty. To má již třídu ajax a po kliknutí načte další produkty a díky data-ajax-append="true" tyto produkty přidá k zobrazeným.
Ve filtru mám různé parametry s různýma hodnotama. Po výběru / kliknutí na hodnotu některého z parametrů se odešle formulář (ten má třídu ajax) a překreslí se všechny snippety. Odeslání formu po kliknutí mám takto:

$('.onChangeSubmit.shopFilter input').livequery(function(){
	$(this).on('change', function(){
		$(this).closest('form').submit();
	});
});

Vše funguje, akorát po kliknutí na filtr se provede append a ten právě nepotřebuji. To bych potřeboval snippet překreslit klasickým způsobem, tedy nahradit novými daty. Takže snippet catalogue překreslit s appendem při stránkování a při filtrování bez appendu.

Nějak si nevím rady jakým směrem se ubrat, bádám, zkouším a pořád na to nemůžu kápnout. Nekopněte mne prosím někdo, předem díky moc.

Klobás
Člen | 113
+
0
-

Tohle jsem řešil zrovna pár dní zpátky.

Obal to ještě jedním snippetem. Pokud budeš chtít appendit, překreslíš ten co máš nyní, a pokud budeš filtrovat překreslíš ten nad ním , co nemá data attribut append.

Mě to takto funguje.

flamengo
Člen | 131
+
0
-

@Klobás Až takhle jednoduše? :) Mám pocit, že to bylo první co mě napadlo a zkoušel jsem to, ale něco mi tam nefungovalo (už ani nevím co). Nyní mi to více méně funguje, pár logických chyb, ale to se doladí. Každopádně díky!

bohacf
Backer | 7
+
0
-

Pepiik napsal(a):

Zdravím, pomocí javascriptu vytvářím další odkazy se třídou ajax, ale už se na ně nenaváže událost click.nette.
v initu bych potřeboval

$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);

zaměnit za toto

$(document).off('click.nette', rh).on('click.nette',this.linkSelector, rh);

Toto funguje, ale dá se toho nějak docílit bez přepisování knihovny? Díky

Díky, tohle mi pomohlo. Vyřešil jsi to nějak, nebo stále upravuješ knihovnu?