How to put a <div> inside an iframe?

Question

So, I’m trying to get only one part of my HTML page updated, every "X" time. I was trying to accomplish this through AJAX, but it was giving many problems. So I decided to change the plan.

This is my problem:

I’m passing a model through my controller to a form on Thymeleaf:

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

This way I can create an object and then print its content:

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

I can do what I want by updating the entire page, that is, I can update the content of my object each time I update the page. But the idea is to avoid the whole page being updated, so I thought I’d put this content inside an iframe, and then update the iframe every "x" time. I imagine it would work the same way... something like:

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

The problem is that I can’t get this content to be shown in iframe. I was trying this way:

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

But it doesn’t feel right.

Doubt: How do I put this content inside iframe? Is it possible to do this directly in HTML? Or in some other way? How do I?

Answer 1

Try to ride with that logic.

• 1 - Put a id in the paragraph you want to update
• 2 - In your code you won’t need var in a, for it was only to set the example, not also of log.text(num);
• 3 - In the var log you put the id you put in the HTML, and take the value of it this way $("seu-id").text();
• 4 - In the method setInterval()*, you call the function and pass the value of the time you want to p to update it.

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>

Basically your function will look like this:

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

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

---

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