Progressbar ajax jquery, jak prepsat do Nette

regiss

Zdravim, pokousel jsem se prepsat nasledujici kod do Nette ale neuspesne. Proto bych chtel pozadat o pomoc jak prepsat nasledujici priklad to Nette.

Jak je z nasledujiciho kodu videt, script se spusti po kliknuti na button(test).
Nejprve se spusti funkce progress_bar(), kde se ajaxove nacte test.php, ve kterem se zkontroluje prichozi parametr a vykona se sleep(casove narocna funkce) a vykresli kod pro jquery.

Zkousel jsem si vytvorit signal a ruzne invalidovat snippet, ale neuspesne.
Myslim, ze spousta lidi se uz pokouselo o neco podobneho, ale nikde jsem to nevidel dotahnute do konce.

HTML FILE – test.html

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head><body>
<script>

$(document).ready(function(){

    $('#test').click(function(){

        avail_elem = 0;
        progress_bar(); //Call me once

        function progress_bar() {

            progress_status = $('#progressbar').val();
            progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent'];
            if (progress_status != '100') {
                $.ajax({
                   url: 'test.php?' + progress_status_avail[avail_elem],
                    success: function(msg) {
                        eval(msg);
                        avail_elem++;
                        progress_bar(); //Call me multipe-time
                        }
                    });
                }
            }
    });
});

</script>

<button id="test">Test me</button>
<input id="progressbar" value="0" />

</body>
</html>

PHP FILE – test.php

<?php
// text example php script
if (isset($_GET['twentyfive-percent'])) {
    sleep(1); // I used sleep() to simulate processing
    echo '$("#progressbar").val(25);';
    }
if (isset($_GET['fifty-percent'])) {
    sleep(1);
    echo '$("#progressbar").val(50);';
    }
if (isset($_GET['seventyfive-percent'])) {
    sleep(1);
    echo '$("#progressbar").val(75);';
    }
if (isset($_GET['onehundred-percent'])) {
    sleep(1);
    echo '$("#progressbar").val(100);';
    }

na1k

Přímo kód ti tu z hlavy nenapíšu, ale tvůj nástřel by měl fungovat. Jen bys namísto vypsání Javascriptu měl navěsit callback (někde v dokumentaci je popsáno jak spustit JS callback po přijetí AJAX response) anebo naopak udělat z #progressbar DIV, který bude současně snippetem. Nette ti pak AJAXově změní jeho obsah (číselná hodnota) a ty pak v JS jen použiješ .text() namísto .val()

Jelikož ale vidím, že nijak neřešíš možnost vypnutého JS, šel bych osobně cestou JSONu.
Do JS initu bych dal něco jako volání signálu init_task, který by na straně PHP nastavil nějaký výpočetní úkol do výchozího stavu a mohl by vrátit progress:0 – to by pak JS dostal a odpovídajícím způsobem zobrazil průběh (např. napozicováním obrázku pozadí v progressbaru). JS by pak opakovaně volal signál task_step, který by znamenal v PHP vykonání dalšího kroku onoho náročného úkolu s tím, že server vždy JSONem (tj. payload) procentuální progress.

Výhodou je, že nemusíš řešit snippety a překreslování (které může být občas docela tricky), skript na straně serveru nemusí znát ID elementu s progressbarem – vizualizace průběhu je čistě v režii JS. A taky můžeš tvůj náročný úkol na serveru libovolně rozšiřovat, přičemž strukturu úkolů řeší pouze server a JS je naopak odstíněný a pouze slepě volá provedení dalšího kroku, dokud není hotovo.

Popravdě jsem tohle implementoval už hodně dávno, tak mě klidně opravte nebo doplňte. Sám se rád poučím pokud existuje nějaké rozumnější řešení :)

regiss

Diky za nakopnuti. Pokud by jsi mnel nekde stare kody, tak bych se na to rad podival. Chtel bych z toho pak udelat addon.