Refresh for only one section (not the whole page)

Question

I would like to refresh only one section of the website. It is only one value that I get from Siemens PLC. I receive actual current value, which I want to update on my website.

HTML looks like this:

<table class="tablePowerCurrent">
  <tr>
    <td>
      <p class="Current">:="Var".Point_1.CurrentNow: A</p>
    </td>
      <td>
      <p class="Power">:="Var".Point_1.Power: kWh</p>
    </td>
  </tr>
</table>

Right now I'm doing it with iframes. The table here is placed inside another html, which I use with the iframe in my main html. The iframe has meta refresh.

But now I would like to use script or something similar, to refresh the value.

Answer 1

The easiest solution is to place a JS script that will call the Siemens PLC server and get

setInterval(function()
{
  // Update the Current value
   $('.Current').load("https://siemens.com/api/call"); 

  // Update the Power value
   $('.Power').load("https://siemens.com/api/call")
   
}, 100000) // Repeat the refresh every 10sec

Remember that the API call must return a string or a single value because the code will replace the div value in the HTML with the response that will get by that API call (data). Jquery is required