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

před 3 lety

Phalanx
Člen | 258
+
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)

před 2 lety

pitr82
Člen | 120
+
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?

před 2 lety

enumag
Člen | 2128
+
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)

před 2 lety

pitr82
Člen | 120
+
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.

před 2 lety

CZechBoY
Člen | 3303
+
0
-

Nevolas znova inicializacni js?

před 2 lety

pitr82
Člen | 120
+
0
-

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

před 2 lety

jiri.pudil
Člen | 846
+
0
-

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

před 2 lety

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)

před 2 lety

Jan Mikeš
Člen | 772
+
+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í.

před 2 lety

Kcko
Člen | 302
+
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.

před 2 lety

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?

před 2 lety

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

před 2 lety

Phalanx
Člen | 258
+
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.

před 2 lety

CZechBoY
Člen | 3303
+
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?

před 2 lety

Phalanx
Člen | 258
+
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.

před 2 lety

manwe
Člen | 34
+
0
-

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)

před 2 lety

sepo
Člen | 61
+
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 ?

před 2 lety

theo
Člen | 50
+
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)

před rokem

d@rkWolf
Člen | 48
+
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?

před rokem

Dan Hundrt
Člen | 61
+
+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.

před rokem

rumcais1
Člen | 77
+
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)

před rokem

Phalanx
Člen | 258
+
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

před rokem

rumcais1
Člen | 77
+
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

před rokem

CZechBoY
Člen | 3303
+
0
-

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

před rokem

rumcais1
Člen | 77
+
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

před rokem

rumcais1
Člen | 77
+
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

před rokem

2bfree
Člen | 247
+
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?

před rokem

2bfree
Člen | 247
+
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');

před rokem

d@rkWolf
Člen | 48
+
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)

před 11 měsíci

Yaromil
Člen | 15
+
+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.

před 11 měsíci

Alsatian
Člen | 136
+
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)

před 10 měsíci

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 :)

před 10 měsíci

CZechBoY
Člen | 3303
+
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.

před 5 měsíci

Felix
Nette Core | 902
+
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!).

před 5 měsíci

Kcko
Člen | 302
+
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)

před 3 dny

tom
Člen | 145
+
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.

Stránky: Prev 1 … 14 15 16 RSS tématu