Automatické odeslání AJAX signálu po určitém časovém intevalu

xpackal5

Plánuji udělat komponentu (jednoduchý bootstrap progress bar), který se bude automaticky AJAXově refrešovat (překreslovat snippet) po určitém čase. Chtěl bych to řešit pomocí nette.ajax.js (přes extensions)
a. aby to tahalo refresh time z data-refresh-time atributu toolbaru
b. aby to tahalo refresh url z data-refresh-url atributu toolbaru

Nevím jenom jednu věc, na jaký event navěsit úvodní setTimeout() a na který každý další (tuším, že onSuccess). Počítám, že na jedné stránce bude několik progress barů (pře multiplier), kde každý bude mít jiný timeout a jinou URL.
Nenakopne mě někdo? Díky

PS: chtěl bych se vyhnout javascriptu v šabloně

Rob Bob

Použil bych setInterval místo setTimeout, pokud další spuštění eventu nezávisí na předchozím výsledku. Navěšení na event závisí na tobě – po nějaké uživatelské akci? Nebo po načtení stránky?

xpackal5

Hned po načtení stránky, pak by následoval interval a po něm další načtení dat (redraw snippetu), které by spustilo další inteval atd. atd.

Rob Bob napsal(a):

Použil bych setInterval místo setTimeout, pokud další spuštění eventu nezávisí na předchozím výsledku. Navěšení na event závisí na tobě – po nějaké uživatelské akci? Nebo po načtení stránky?

xpackal5

Napadlo mě toto..

<script>
(function($, undefined){
    $.nette.ext('autorefresh',{
        load:   function(rh){
            $(this.autorefreshSelector).each(function(){
                var url = $(this).attr("data-refresh-url");
                var refreshTime = $(this).attr("data-refresh-time");
                this.reloadData(url,refreshTime);
            });
        },
        success: function (payload){
            if (payload.snippets) {
                this.updateSnippets(payload.snippets);
            }
        }
    },{
        reloadData: function(url,refreshTime){
            $.nette.ajax({
                    type: 'GET',
                    url: url,
                    success:    function(payload){
                        this.updateSnippets(payload.snippets);
                        setInterval(function(){
                            this.reloadData(url,refreshTime);
                        },refreshTime * 1000);
                    }
            });
            return;
        },
        autorefreshSelector:    ".autorefresh",
    });
})(jQuery);
</script>

Rob Bob

Pak pokud vyžaduješ, aby to bylo $.nette.ajax extension, můžeš to dát do init metody, která se zavolá jednou během $.nette.init(); a tam to celé inicializuješ. Pak by to mohlo zhruba vypadat takto (netestováno).

<script>
$.nette.ext('polling', {
	init: function () {
		$('selector').each(function(index) {
            time = $(this).data('refresh-time');
			url = $(this).data('refresh-url');
			setInterval(function(url) {
               $.nette.ajax(url);
            }, time, url);
        });
	}
});
</script>

Asi by se tam hodila kontrola, jestli už ti stejný požadavek neprobíhá, případně použít setTimeout místo setInterval a pak dát další spuštění vždy zase přes setTimeout až do success metody

Editoval Rob Bob (27. 9. 2017 13:20)

Rob Bob

Zdá se mi, že tam máš zbytečně to vlastní volání překreslení snippetu, o to by se ti mělo postarat defaultní snippet extension, pokud ho máš aktivní. Navíc si po každém požadavku v success metodě nastavíš další setInterval, přitom ti bude běžet i ten původní, v tomto případě bys měl použít setTimeout.

Editoval Rob Bob (27. 9. 2017 13:22)

xpackal5

No jo, ale když dám setTimeout do success metody, tam se nedostanu už zpátku k času a url získanými ze selektoru

Rob Bob napsal(a):

Pak pokud vyžaduješ, aby to bylo $.nette.ajax extension, můžeš to dát do init metody, která se zavolá jednou během $.nette.init(); a tam to celé inicializuješ. Pak by to mohlo zhruba vypadat takto (netestováno).
<script>
$.nette.ext('polling', {
	init: function () {
		$('selector').each(function(index) {
            time = $(this).data('refresh-time');
			url = $(this).data('refresh-url');
			setInterval(function(url) {
               $.nette.ajax(url);
            }, time, url);
        });
	}
});
</script>
Asi by se tam hodila kontrola, jestli už ti stejný požadavek neprobíhá, případně použít setTimeout místo setInterval a pak dát další spuštění vždy zase přes setTimeout až do success metody