dynamiczna podmiana na stronie

0

Witam wszystkich. Natknąłem się na następujący problem dotyczący dynamicznej podmiany cyfry na stronie. Nigdy tego nie robiłem więc pewnie to taki mój problem w tym. Chciałbym by na stronie gdzie znajduje się obszar z progresemPrzechwytywanie.JPG
podmieniało mi cyfrę bez przeładowania strony. Mam już całą logikę która zwraca mi kolejne cyfry progresu i przekazuje je do frontu ( jsp )

mam też metode w której mapy : progress - to cyfra progresu i to_processed to cyfra puli ( w tym przypadku 8 )

    public void actionRetrieveProgress() {
 ProgressDto progressDto = workerDelegate.retrieveActionProgress(actionId);
        paramsMap.put("progress", progressDto.getCurrentProgress());
        paramsMap.put("to_processed", progressDto.getProcessPool());
        paramsMap.put("copyingAssortmentReportId", actionId);
}

na froncie wygląda to tak :

  <div class="msg-ok">
            Skopiowano ${app.progress} z ${app.to_processed}
        </div>

chciałbym napisać funkcję która będzie uruchamiała się wraz ze startem submitu formularza na strony. Za pomocą:

 <div class="buttons-container">
            <input class="button" type="submit" onclick="checkProgress()" value="Rozpocznij proces kopiowania" />

        </div>

dzieje się cała logika i tutaj na onclick zrobiłem funkcję checkProgress(). Co mam zrobić żeby ta funkcja, załóżmy co 10 sekund odpalała mi metodę "actionRetrieveProgress" , która to wrzuca do mapy

 ${app.progress}

i żeby ta wartość podmieniała się na stronie bez przeładowania ?

Dziękuje za pomoc

0

Nie wiem jak masz tam podzielone te jsp wiec zaproponuje dosc latwe rozwiazanie.

Zmapuj metode sprawdzajaca progress na jakis URL ktory bedzie zwracac JSONa, np:

{
  progress: 1,
  to_progres: 8
}

Zmien swój kod html opakowujac progress w span tak zebys wiedzial w ktorym miejscu podmieniac wartosc w przyszlosci:

 <div class="msg-ok">
            Skopiowano <span id='progress'>${app.progress}</span> z ${app.to_processed}
        </div>

Nastepnie mozesz uzyc metod setInterval z funckcja ktora bedzie wolac AJAXem Twoj URL od progresu. Gdy 'progress' === 'to_progress' wtedy clearInterval. http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_clearinterval

W funkcji ktora bedzie obslugiwac tego JSONa po prostu zrobic cos w stylu:

document.getElementById('progress').innerHTML = 'nowa wartosc'
0

A da się zrobić to tak że, na onsubmit czyli :

<div class="buttons-container">
            <input class="button" type="submit" onsubmit="checkProgress()" value="Rozpocznij proces kopiowania" />

        </div>

wykonuje się funkcja checkProgress(), która odpala metodę Java:

public Integer actionRetrieveProgress() {
         String actionId = p.getParam("actionId");
        WorkerDelegate workerDelegate = new WorkerDelegate(getUserData(), workerHost, workerPort);

        ProgressDto progressDto = workerDelegate.retrieveActionProgress(actionId);
        paramsMap.put("progress", progressDto.getCurrentProgress());
        paramsMap.put("to_processed", progressDto.getProcessPool());
        paramsMap.put("copyingAssortmentReportId", actionId);
        return progressDto.getCurrentProgress();
    }

która zwraca Integer z aktualnym progresem ( progres jest logowany w tabeli sql więc stamtąd mógłbym pobierać cyfrę progresu )
i jest on wklejany do

<div id=progress></div>

?

i takie sprawdzanie/podmiana cyfry idzie na przykład co trzy sekundy

1 użytkowników online, w tym zalogowanych: 0, gości: 1