How to put a div inside an iframe?

Question

How to put a div inside an iframe?

Navigation

#1 by (2 votes)

5

So, I'm trying to make only one part of my HTML page refresh at every "X" times. I was trying to accomplish this through AJAX, but it was giving me a lot of trouble. So I decided to change my plan.

Here's my problem:

I'm passing a model through my controller to a form in 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 contents:

<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 contents of my object every time I update the page. But the idea is to prevent the whole page from being updated, so I thought about putting that content inside an iframe, and then updating the iframe every "x" times. I imagine it would work the same way ... Something like:

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

The problem is that I can not get this content to be shown in the 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 does not seem the right way.

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

javascript java html thymeleaf

asked by anonymous 17.08.2018 / 20:28

1 answer

View a dynamically loaded text / photo block with QML for Android Git semantic messages

score 2 · Accepted Answer

Try to ride with this logic.

1 - Put a id in the paragraph you want to update

2 - In your code you will not need var num , since it was just to set up the example, nor also of log.text(num) ;

3 - In var log you put the id that you put in Html, and get the value of it this way $("seu-id").text();

4 - In the setInterval () * method, 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><pth: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>