5

Então, estou tentando fazer com que somente uma parte da minha pagina HTML se atualize, a cada "X" tempos. Estava tentando realizar isso através de AJAX, mas estava dando muitos problemas. Então resolvi mudar de plano.

Eis o meu problema:

Estou passando um model através do meu controller para um form no thymeleaf:

 <form id="formTest" class="form-inline" action="#" th:action="@{'log/'}" th:object="${log}" method="post">
      ...
</form>

Desse jeito consigo criar um objeto e então printar o seu conteúdo:

<p th:utext="${log.content}">Log content</p>

Consigo fazer oque quero atualizando toda a pagina, ou seja, consigo atualizar o conteúdo do meu objeto cada vez que eu atualizo a pagina. Mas a ideia é evitar que toda a pagina seja atualiza, logo, pensei em colocar esse conteúdo dentro de um iframe, e então atualizar o iframe a cada "x" tempos. Imagino que funcionaria do mesmo jeito... Algo como:

document.getElementById(id).contentDocument.location.reload(true); 

O problema é que não consigo fazer com que esse conteúdo seja mostrado no iframe. Estava tentando desse jeito:

 <iframe id="logIframe" src="/log" width="950" height="500"> <!-- Meu iframe -->
    <div id="logDiv" class="panel-body">
       <pre>
          <p th:utext="${log.content}">Log content</p>
       </pre>
    </div>
 </iframe>

Mas não parece o jeito certo.

Duvida: Como coloco esse conteúdo dentro do iframe? É possível fazer isso direto no HTML? Ou de alguma outra maneira? Como faço?

1 Resposta 1

2

Tenta montar com essa lógica.

  • 1 - Coloque um id no parágrafo que quer atualizar
  • 2 - No seu código vc não precisará da var num, pois foi só para montar o exemplo, nem também do log.text(num);
  • 3 - Na var log vc coloca o id que que colocou no Html, e pega o valor dela deste jeito $("seu-id").text();
  • 4 - No método setInterval()*, vc chama a função e passa o valor do tempo que quer ao p para atualizá-lo.

var num = 0;

function atualizar() {
  var log = $("#atlzr");          
  ++num;
 
  log.text(num);
}

setInterval(function() {
  atualizar();
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p th:utext="${log.content}" id="atlzr">Log content</p>

Basicamente sua função ficará assim:

function atualizar() {
  var log = $("#atlz").text();
}

setInterval(function() {
  atualizar();
}, 1000);

<p th:utext="${log.content}" id="atlzr">Log content</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .