jQuery knob not shown, when I use setintervall to refresh div

Question

For my smarthome-visualisation I will use a knob for changing the heating temperature.

Further I am using the following function to refresh the DIV, where the knob is in. After the refresh there is no knob, only the input field

What do I have to change, that knob will be also displayed after refresh?

I don't know how to fix it. Maybe the refresh(setInterval) needs to be included in the knob function, but I find no working way yet.

Knob before div was refreshed

Knob after div was refreshed

Function for refresh every second:

$(document).ready(
  function() {
    setInterval(function() {
      $("#schalter").load(" #schalter > *");
    }, 1000); //Delay here =  seconds
  });

$(".knobID").knob({
  'release': function(sendpostresp) {
    $.ajax({
      url: "publish.php",
      type: "POST",
      data: {
        foo: sendpostresp,
        test: '123'

      },
      success: function(result) {
        alert(result);
      }
    });
  }
});

<div class="schalter" id="schalter">
  <input type="text" data-angleoffset=-125 data-anglearc=250 data-fgcolor="#66EE66" value="22" class="knobID" data-step=".5" data-min="0" data-max="30">
</div>

Answer 1

The issue is most likely related to how the Knob plugin is initialized and rendered. When using setInterval() to refresh the div, the plugin's initialization code may not be executed correctly, which could cause the Knob to not be shown.

To solve this issue, one possible solution is to reinitialize the Knob plugin every time the div is refreshed.

function refreshDiv() {
  $.ajax({
    url: '/some/url',
    success: function(data) {
      $('#myDiv').html(data);
      $('#myKnob').knob(); // reinitialize the Knob plugin
    }
  });
}

setInterval(refreshDiv, 1000);